javascript - jQuery 在选择框和按钮中添加删除类

Question

我有两个选择框和几个按钮作为帖子类别过滤器。查看我的 Fiidle 。我想在单击任何按钮或选择框时添加背景颜色，并在单击另一个按钮时将其删除。效果完全一样在这个example .

我想我必须注册一个 change选择框上的事件。然而，作为一个初学者，我所能想到的就是把这段代码切碎

$selectors.change(function() 
{
     var $selector = $(this);
     var cat = $selector.data('product-collection__category');
     $selectors.removeClass('product-collection__selector--active');
     $selector.addClass('product-collection__selector--active');
});

并将其变成这个无效代码

$selectors.change(function() 
{
     var $selector = $(this);
     var cat = $selector.find('option:selected').data('product-collection__category');
     $selectors.removeClass('filterselect__selector--active');
     $selector.addClass('filterselect__selector--active'); 
});

谁能告诉我如何让它工作？

Answer 1

只需在下面添加 css 即可。

.product-collection__selector:hover {
    background: green;
}
.product-collection__selector {
    -webkit-transition:background-color 0.3s ease-in;
    -moz-transition:background-color 0.3s ease-in;
    -o-transition:background-color 0.3s ease-in;
    transition:background-color 0.3s ease-in;
}  

JS 变化

替换

var $dropdown = $collection.find('.filterselect');

 var $selectors = $collection.find('.product-collection__selector,.filterselect__selector');

与

var $selectors = $collection.find('.filterselect');  

在您的更改事件中添加以下代码以从 li

中删除事件的 class

$collection.find('li').removeClass('product-collection__selector--active');

Updated DEMO

编辑答案

不需要像上面那样替换只需添加下面两行代码。并进行如下更改:

var $dropdown = $collection.find('.filterselect');
var $selectors = $collection.find('.product-collection__selector,.filterselect__selector');  

替换

$selectors.change(function () 
AND
$selectors.removeClass('filterselect__selector--active');

与

$dropdown.change(function ()
AND
$dropdown.removeClass('filterselect__selector--active');

NEW UPDATED FIDDLE