我正在測驗一些 jQuery，并希望在將滑鼠懸停在特定 div 或鏈接塊上時更新影像。
所以我想做的是當懸停在 .test-block 上時，獲取帶有 url 的隱藏文本并在 .large-image-2 上更新它。似乎無法在懸停時獲得特定文本。
這是我想出的代碼：
$('.test-block').on('onmouseenter', function() {
let myUrl = $(this).find('.display-hidden').text();
$('.url').text(myUrl);
});
我在此頁面上進行測驗：https ://jquery-testing.webflow.io/update-image三個底部 div 和右側底部圖片是我想要使用的。
提前致謝！
uj5u.com熱心網友回復：
您的示例存在一些問題。主要是你注冊事件處理程式的方式。
對于 jQuery，正確的方法是$(target).on('mouseenter')- 在on...通過 jQuery 進行操作時省略要注冊的事件的部分。
我可能會以一種不太具體的方式和更簡單的句柄來實作您正在尋找的功能，如下所示：
$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this)
const target = that.data('image-target')
const url = that.data('image-url')
$(target).attr('src', url);
})
divs.first().trigger('mouseenter')
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=one">
Hover One
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=two">
Hover Two
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=three">
Hover Three
</div>
<img id="my-target-image">解釋：
資料屬性：
在我的示例中使用了兩個資料屬性：data-image-target和data-image-url.
在您希望觸發事件的元素上使用資料屬性將使您的腳本更加健壯且不易出錯，因為事件注冊系結到使用 jQuery 選擇器的屬性選擇器$([data-image-target][data-image-url])而不是任意的存在的兩個屬性類名和/或 ID。
data-image-target應該有一個 CSS 選擇器，它指向您希望打開 src url 的元素<img>，而data-image-url應該保存您要切換到的影像的 url。
上面的代碼甚至可以替換頁面上前 3 個影像的現有功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490534.html
標籤：javascript html jQuery css
上一篇：為什么函式的第二個引數永遠不會
下一篇：處理未定義的文本輸入值