javascript - 根据数据属性依次添加类

Question

我有几个链接显示了一些 div，具体取决于数据属性。当我单击其中一个链接，并且有多个具有相应属性的 div 时，我希望将类按顺序添加到 div，使它们一次加载一个。就像它在 ready 函数中所做的一样，但我在某种程度上搞砸了，无法弄清楚。

$('.filter_link').on('click', function(e) {
    e.preventDefault();
    var linkAttr = $(this).attr('data-related'); 
    $('.blurb-content').each(function() {
        $(this).removeClass('flip');
        if($(this).attr('data-dest') == linkAttr) {
            // this does not work
            setTimeout(function() {
                $(this).addClass('flip'); //add class with delay
            }, 500);
        }
    });
});

fiddle

Answer 1

两个问题:

1. 在 setTimeout() 内部，this 将不再引用您的元素。因此，您需要在 setTimeout() 的外部将其声明为变量，并在 setTimeout() 内部使用该变量而不是 $(this)。关于此的更多信息 can be found here .

2. 当您使用 .each() 遍历元素时，它们基本上是同时发生的。您的 setTimeout() 没有“按顺序”附加，因此它们将全部延迟 500 并且然后同时触发。通过为 each 函数提供参数 i，将 500 乘以 .each() 的迭代次数>，并执行 500 * i，就像您在第一个 each 中所做的那样。

编辑:如您所见，我对您的代码进行了大量重构。它现在使用函数 showBlurbs() 简单地淡化每个(将参数作为 jQuery 对象列表)。它解决了对如此多的 .each() 循环的需求，并且代码更加简洁。

一些其他注意事项:

• 您可以使用 .data("xxx") 而不是 .attr("data-xxx")< 获取 data 属性

• 无需遍历所有元素并检查它们的数据属性，您只需选择匹配的元素即可:

  var linkAttr = $(this).data('related');
  $blurbsToShow = $('.blurb-content[data-dest=' + linkAttr + ']');
  

$(document).ready(function() {
  
  //Show ALL blurbs at the beginning
  var timeouts = [];
  var $allBlurbs= $(".blurb-content");
  showBlurbs($allBlurbs);


  //On click, show related blurbs
  $('.filter_link').on('click', function(e) {
    e.preventDefault();
    var linkAttr = $(this).data('related');
    var $relatedBlurbs = $('.blurb-content[data-dest=' + linkAttr + ']');
    showBlurbs($relatedBlurbs);
  });


  function showBlurbs(blurbs) {

    //Clear all pending animations
    for (var i = 0; i < timeouts.length; i++) {
        clearTimeout(timeouts[i]);
    }

    //Reset everything to hidden
    timeouts = [];
    $(".blurb-content").removeClass("flip");

    //Sequentially trigger the "fade-in" for each blurb
    blurbs.each(function(i) {
      var $self = $(this);
      timeouts.push(setTimeout(function() {
        $self.addClass("flip");
      }, 500 * i));
    });

  }


});

.blurb-content {
  opacity: 0;
  display: none;
}

.flip {
  display: block;
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    op.blurb-content {
      opacity: 0;
      display: none;
    }
    .flip {
      display: block;
      -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    @-webkit-keyframes fade-in-bottom {
      0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes fade-in-bottom {
      0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }
    acity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="filter_link" data-related="1">link1</a>
<a href="#" class="filter_link" data-related="3">link2</a>
<a href="#" class="filter_link" data-related="3">link3</a>
<a href="#" class="filter_link" data-related="2">link4</a>

<div class="blurb-content" data-dest="1">content 1</div>
<div class="blurb-content" data-dest="1">content 1</div>
<div class="blurb-content" data-dest="2">content 2</div>
<div class="blurb-content" data-dest="3">content 3</div>