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

不是使用ID，而是给按钮一个类。

HTML：

<button id="button1" class="hoverbutton" />
<button id="button2" class="hoverbutton" />

jQuery的：

$(".hoverbutton").mouseenter(function () {
        $(".arrowclass").fadeIn('100', function () { });
    });

$(".hoverbutton").mouseleave(function () {
        $(".arrowclass").fadeOut('100', function () { });
    });

Answer 2

$(".buttonClass").mouseenter(function(){
  $(this).siblings('.aClass').fadeIn('100', function() { });

  $(".buttonClass").mouseleave(function(){
      $(this).siblings('.aClass').fadeOut('100', function() {}); 
  }); 
});

你可以使用它（或类似的，而不是兄弟姐妹使用适当的选择器）并将提到的类（aClass和buttonClass）添加到你的组件中。

这样做的一个例子：

<div>
 <button class="buttonClass">Description</button>
 <a class="aClass">Description</a>
</div>

请注意，在div标签内对其进行“分组”非常重要，因为当您悬停按钮时，其他所有<a>标签会淡入/淡出。

Answer 3

您的解决方案无法扩展。

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

这是我用jQuery的牛肉之一。这样就可以很容易地做出这些错误的事情并沿途拍摄自己。

您需要的是事件委派。

基本上，这个概念是你在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/

Answer 4

这样的事情可能会让你开始：

$("[id*=button]").mouseenter(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeIn('100', function() {
    }); 
}).mouseleave(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeOut('100', function() {
    }); 
});

如何使用动态div ID

4 个答案: