Question

我有一些动态创建的div。它们看起来像这样：

<div class="item-logo"><img src="XXX"></div>
<div class="item-move">Move Me</div> 

<div class="item-logo"><img src="XXX"></div>
<div class="item-move">Move Me</div> 

<div class="item-logo"><img src="XXX"></div>
<div class="item-move">Move Me</div>

这是我想要做的，所以我可以有一个脚本，它将添加一个类，所以每个div都是唯一的，然后为每个div执行。

<script>
    jQuery(document).ready(function($) {

      $( ".item-logo" ).addClass(function( index ) {
      return "number-" + index;
    });
      $( ".item-move" ).addClass(function( index ) {
      return "blurb-" + index;
    });


      $(".number-" +index).mouseover(function() {
        // Set the effect type
        var effect = "slide";

        // Set the options for the effect type chosen
        var options = { direction: "left" };

        // Set the duration (default: 400 milliseconds)
        var duration = 500;

        $(".blurb-"+ index).toggle(effect, options, duration);

      }).mouseout(function(){
         $(".blurb-"+ index).hide('slide',{direction:'left'});

    });

    });

    </script>

对此有任何帮助表示赞赏。

Answer 1

不要乱用添加类，而是遍历DOM。将事件处理程序应用于所有.item-logo个实例。在事件处理程序中，this将是单击的元素。 $(this).next()将获得下一个div - 根据标记，您要显示和隐藏<div>。

 $(".item-logo").mouseover(function() {
    // Set the effect type
    var effect = "slide";

    // Set the options for the effect type chosen
    var options = { direction: "left" };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;

    $(this).next().toggle(effect, options, duration);

  }).mouseout(function(){
     $(this).next().hide('slide',{direction:'left'});
});

jquery根据索引将脚本应用于所有div

1 个答案: