jquery - 如何在悬停在其他元素上时更改动态创建的 div？

Question

我有一个带有动态添加图像的文本。我想实现的是，当用户将鼠标悬停在图像上时，文本中的单词会改变背景。

例如，我有 ID 为 a1、a2、a3 .... 的图像和 ID 为 b1、b2、b3 的跨度文本...目标 - 当用户将鼠标悬停在 a1 上时，b1 跨度文本会更改背景等。

我发现这个函数很有用，但我不知道如何让它动态化。

$(function() {
  $('#a').hover(function() {
  $('#b').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
  $('#b').css('background-color', '');
  });
});

例子:

Þeir, sem á <span class="amatic" id="b1">skipinu</span> voru, <span class="amatic" id="b2">sáu</span> ... Voru strendur hennar <span class="amatic" id="b6">háar</span> og sæbrattar

<br>
<img src="images/size_320/lod.jpg" alt="skip" id="a1">
<img src="images/size_320/videt.jpg" alt="sjá" id="a2">  
<img src="images/size_320/vlasy.jpg" alt="hár" id="a6">

Answer 1

您可以为某个元素分配一个新的{attribute}(将该属性放在{img} 或{span} 上)。

<div class="wrapper">
    <img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729513_960_720.jpg" id="a1" />
    <span class="text" data_current_bg="" id="text1"> Text 1 </span>
</div>
<div class="wrapper">
    <img src="https://cdn.pixabay.com/photo/2016/10/03/17/11/cosmos-flower-1712177_960_720.jpg" id="a2" />
    <span class="text" data_current_bg="" id="text2"> Text 2 </span>
</div>
<div class="wrapper">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqysRONV6q1elD6x4WJRe_6X5oIswrNXMDByxkNkij8xPWjRECkg" id="a3" />
    <span class="text" data_current_bg="" id="text3"> Text 3 </span>
</div>

在这个例子中，我们在 [span] 元素中分配了一个名为 [data_current_bg] 的新属性。

然后从您的 JS 中。您可以为每个分配您想要的值(value)。

var oWrapperImages = $('.wrapper img');

oWrapperImages.each(function() {
    // Find every {span} elements next to {img} tags
    // Assuming you set each text's bg color in css
    var oSpanTexts = $(this).parent().find('.text');

    // On loading ths js, Assign the default bg color of each texts
    var sBackgroundColor = oSpanTexts.css('background-color');
    $(this).attr('data_current_bg', sBackgroundColor);
});

然后你可以在任何时候想要检测进程中的“悬停”事件时引用它

oWrapperImages.hover(function() {
   var oSpanTexts = $(this).parent().find('.text');
   var sCurrentBGColor = $(this).attr('data_current_bg');
   oSpanTexts.css('background-color', sCurrentBGColor);
}, function() {
   // rest of code
});

这里有一个 jsfiddle 供您进一步引用:http://jsfiddle.net/k0o1exmf/

希望对你有帮助

编辑

您也可以分配索引。在这个问题的情况下，我们可以根据最后的索引(例如“image1”)更改 [span] 文本的背景颜色

在这种情况下，我们将从该图像中获取“1”。然后将其附加到文本('text')。

请注意，考虑到您想要分隔 [img] 和 [span] 标签，这可能有点老套。

JSFiddle: http://jsfiddle.net/ozd7y8av/

希望这对您有所帮助。