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

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'});
});