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 Change

替换

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

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

带

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

在更改事件中添加以下代码，以从class

中删除有效li

$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

Answer 2

FIDDLE解决了背景颜色问题。 Onchange事件适用于选择节点，而不适用于选项。此外，没有太多要求在容器div上应用.each。

var $selectors = $('select.filterselect');

您可以使用jQuery节点遍历，.parent，.parents，.children，.find方法根据更改的选择框找到要在其中修改数据的最近容器。

希望这有帮助。

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

2 个答案: