Question

我正在使用此Very Lightweight Portfolio Filter for Bootstrap，我想在点击的按钮中添加或删除类。

因此，默认情况下，我想要使用课程btn-primary设置“全部”按钮，然后当用户点击另一个按钮时，从“全部”按钮中删除btn-primary，并将课程btn-default添加到全部按钮和btn-primary到单击的按钮。

我无法弄清楚如何将其添加到我正在使用的jquery库中。有人能帮助我举一个我应该做的事情的例子吗？

以下是一些代码：

!function ($) {

  "use strict"; // jshint ;_;

  var pluginName = 'portfilter';

 /* PUBLIC CLASS DEFINITION
  * ============================== */

  var PortFilter = function (element) {

    this.$element = $(element);
    this.stuff    = $('[data-tag]');
    this.target   = this.$element.data('target') || '';

  };

  PortFilter.prototype.filter = function (params) {
    var items = [],
        target = this.target;
    this.stuff
        .fadeOut('slow').promise().done(function(){
            $(this).each(function(){
                if($(this).data('tag') == target || target == 'all') 
                    items.push(this);                    
            });
            $(items).show();                  
        });  
  };


 /* PLUGIN DEFINITION
  * ======================== */

  var old = $.fn[pluginName];

  $.fn[pluginName] = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data(pluginName);

      if(!data) $this.data(pluginName, (data = new PortFilter(this)));

      if (option == 'filter') data.filter();
    });
  };

  // DEFAULTS
  $.fn[pluginName].defaults = {};

  // CONSTRUCTOR CONVENTION 
  $.fn[pluginName].Constructor = PortFilter;


 /* PORTFILTER NO CONFLICT
  * ================== */

  $.fn[pluginName].noConflict = function () {
    $.fn[pluginName] = old;
    return this;
  };

 /* PORTFILTER DATA-API
  * =============== */

  $(document).on('click.portfilter.data-api', '[data-toggle^=portfilter]', function (e) {
        $(this).portfilter('filter');
        $("button").not(target).removeClass("btn-primary");
        $(target).addClass("btn-primary");
  });

}(window.jQuery);

这是我在上面的代码中添加的内容：

$("button").not(target).removeClass("btn-primary");
$(target).addClass("btn-primary");

我尝试过其他一些事情，如果需要，我很乐意分享。

Answer 1

这将删除btn-primary类，并在每次点击不是All按钮的按钮时将btn-default类添加到All按钮。

$(function () {
  $("#All").addClass("btn-primary");
  $("button").not("#All").on("click", function () {
    $("#All").addClass("btn-default).removeClass("btn-primary");
    $(this).addClass("btn-primary");
  });
});

Answer 2

我最后添加了这个：

$("button").not('#'+this.id).removeClass("btn-primary").addClass("btn-default");
$('#'+this.id).addClass("btn-primary");

这里：

$(document).on('click.portfilter.data-api', '[data-toggle^=portfilter]', function (e) {
        $(this).portfilter('filter');
  });

并把它拿出来：

$("button").not(target).removeClass("btn-primary");
$(target).addClass("btn-primary");

从按钮添加/删除类

2 个答案: