jQuery切换功能在一段时间后失败

Question

我编写了一个 jQuery 切换函数，如下所示：

// category filter
$.fn.clickToggle = function(a, b) {
  var ab = [b, a];
  function cb(){ ab[this._tog^=1].call(this); }
  return this.on('click', cb);
};

$.fn.swapClass = function(oldClass, newClass) {
  return $(this).removeClass(oldClass)
                .addClass(newClass)
                .fadeIn('fast');
};

$('.category-filter').clickToggle(function() {
  // clear old
  $('.category-filter').each(function() {
    $(this).fadeTo('fast', 1.0);
    $(this).swapClass('label-success', 'label-default');
  })

  // get new
  var category = $(this).attr('data-category');
  $(this).swapClass('label-default', 'label-success');

  // apply new
  $('.category-filter').each(function() {
    if (!($(this).attr('data-category').indexOf(category) >= 0)) {
      $(this).fadeTo('fast', 0.5);
    }
  })
  $('.article_container').each(function() {
    if ($(this).attr('data-categories').indexOf(category) >= 0) {
      $(this).fadeIn('fast');
    } else {
      $(this).fadeOut('fast');
    }
  })
}, function() {
  $(this).swapClass('label-success', 'label-default');
  $('.article_container').each(function() { $(this).fadeIn('fast') })
  $('.category-filter').each(function() { $(this).fadeTo('fast', 1.0) })
});

它可以正常工作 - 请参阅 JSFiddle here - 但在单击一个链接然后“跳过”以单击另一个链接后，切换似乎会中断。

我的功能有什么问题？如何更改它以切换用户是再次单击同一链接还是下一次单击另一个链接？

Answer 1

这是因为即使您在单击一个元素时更改了其他元素的样式，但您并没有更改._tog 的值。

您正试图以两种不同的方式维护状态。一个通过 ._tog，另一个通过 label-success/label-default 类。我建议完全不要使用._tog 并依赖这些类。事实上，我会大大简化你的整个 javascript。

更新对不起，这只是一个快速的答案，我必须运行，但你去吧： https://jsfiddle.net/uh123qwx/3/

$('.category-filter').click(function(){
    $('.category-filter').not(this).removeClass('active');
    $(this).toggleClass('active');
});

.category-filter { background-color: #777; transition: all .5s ease-in-out; }
.category-filter.active { color: green; background-color: #5cb85c; }

.category-filter.active[data-category='custom article'] ~ div > .article_container:not([data-categories*='custom article']),
.category-filter.active[data-category='retirement'] ~ div > .article_container:not([data-categories*='retirement']),
.category-filter.active[data-category='property'] ~ div > .article_container:not([data-categories*='property'])
{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="label category-filter" data-category="custom article">custom article</span>
<span class="label category-filter" data-category="retirement">retirement</span>
<span class="label category-filter" data-category="property">property</span>

<div>
  <div class="article_container" data-categories="custom article">
    <p>Custom</p>
  </div>
  <div class="article_container" data-categories="custom article">
    <p>Another custom</p>
  </div>
  <div class="article_container" data-categories="retirement">
    <p>Retirement</p>
  </div>
  <div class="article_container" data-categories="property">
    <p>Property</p>
  </div>
  <div class="article_container" data-categories="property retirement">
    <p>Property and retirement</p>
  </div>
</div>

Answer 2

您没有正确创建插件，并且可以让它们为您完成更多工作。

First it's important to realize that when the selector matches more than one element...this in plugin includes the whole collection.

因此，插件通常包含this.each() 部分以隔离实例。通常它看起来像return this.each(){ //instance code });

不是在插件中迭代通常会完成的集合，而是在其他代码中对相同的元素集合进行大量迭代，而实际上不需要在那里