jQuery添加刪除選擇框和按鈕中的類

我有兩個選擇框和一些按鈕作爲後類別過濾器。看看我的Fiidle。當我點擊任何按鈕或選擇框時，我想添加背景顏色，並在點擊另一個時將其刪除。效果與此example中的完全相同。jQuery添加刪除選擇框和按鈕中的類

我想我必須在選擇框中註冊一個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'); 
});

會有人請告訴我如何得到這個工作？

來源

2014-02-14 RedGiant

你想把背景應用到誰身上？你能解釋更多嗎？ – Saurabh

@Saurabh當單擊任何按鈕或選擇框時，我希望它將背景顏色更改爲綠色，然後在單擊其他任何按鈕或選項時更改爲其原始顏色。 – RedGiant

只需在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

0123取出活躍

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

Updated DEMO

編輯答案

不需要如上更換隻需添加以下兩個線路代碼。並進行更改如下：

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

與

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

NEW UPDATED FIDDLE

來源

2014-02-14 06:42:28

它很接近。當我在選擇框中選擇一個選項時，是否可以從我之前單擊的按鈕中刪除類'product-collection__selector - active'？ – RedGiant

請檢查我的更新答案。 –

當從'var $ selectors'中刪除'.product-collection__selector'時，按鈕過濾器不再起作用。你如何讓他們與選擇框一起工作？爲按鈕創建一個新的變量？ – RedGiant

的FIDDLE解決了背景色的問題，更換

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

。 Onchange事件適用於選擇節點，不適用於選項。也沒有太多的要求應用.each在集裝箱股利。

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

您可以使用jQuery遍歷節點，.parent，。家長，。孩子，.find方法來定位要修改基礎上，選擇框被更改過的數據最接近的容器。

希望這會有所幫助。

來源

2014-02-14 06:42:54 Ankur

jQuery添加刪除選擇框和按鈕中的類

回答

相關問題