javascript - 如何使用动态div ID

Question

我在这里查看了很多非常接近的答案，但由于我的 jQuery 知识非常零碎，我无法使它们相关。所以我就去问一下。希望大家不要介意!

所以，这是脚本:

$("#button1").mouseenter(function(){
  $("#a1").fadeIn('100', function() { });

  $("#button1").mouseleave(function(){
      $("#a1").fadeOut('100', function() {}); 
  }); 
});

我有多个按钮，我想在 mouseenter 上激活相应的箭头。

而不是为每一对重复脚本 - #button2 到 #arrow2 等 - 我怎样才能在 $() 中放入一些简洁的变量 位并且它可以工作吗？听起来很简单，我确信有一种方法是我的密集找不到的。

这是 HTML(对于那些请求它的人):

 <div id="buttons">
    <p><a href="#"><img src="images/1.png" name="button1" id="button1" /></a></p>
    <p><a href="#"><img src="images/2.png" name="button2" id="button2" /></a></p>
    <p><a href="#"><img src="images/3.png" name="button3" id="button3" /></a></p>
    <p><a href="#"><img src="images/4.png" name="button4" id="button4" /></a></p>
    <p><a href="#"><img src="images/5.png" name="button5" id="button5" /></a></p>
    </div>

<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div>

Answer 1

您的解决方案无法扩展。

您正在为 dom 中的每个元素分配事件处理程序。

这是我对 jQuery 的不满之一。这使得很容易做错这些事情并搬起石头砸自己的脚。

您需要的是事件委托(delegate)。

本质上，这个概念是在 dom 树的更高层有一个事件处理程序，用于监听冒泡的事件。因此，您可能在列表上处理鼠标事件，而不是在列表项本身上，而是在文档上的单个事件处理程序中。

看看http://api.jquery.com/on/

你的代码应该是这样的:

$('body').on('mouseenter', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeIn(300);
});

$('body').on('mouseleave', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeOut(300);
});

请注意，我实际上仅使用 id 来获取按钮和箭头之间的链接。您可能会考虑跳过所有 id，而只根据元素在其父元素中的索引进行查找。

可以在这里找到工作示例:http://jsfiddle.net/GNs44/1/