我有標籤的列表，單擊時，jQuery的切換類和關閉。ToggleClass使用複選框標籤

每個標籤都會有關於什麼是黑說不同的圖標。當該類被激活以表示它被選中時，灰色箭頭將覆蓋標籤。我需要的是將圖標從黑色更改爲白色，這是我遇到問題的地方。

這裏是例如一個快速的jsfiddle：http://jsfiddle.net/vvvRX/

在我的jQuery的切換，其切換稱爲主動活動類，但是這是對純灰色箭頭，如何將我得到它顯示灰色箭頭，每個標籤的白色圖標？

我需要做一個if語句而不是$(this)嗎？

似乎太多div和類漂浮，所以我知道必須有解決方案！

謝謝。

來源

2013-07-02 user2212564

你能重新制定excact問題？我不明白你想達到什麼。 –

你的圖標在哪裏，你在說什麼灰色箭頭？我沒有看到你的小提琴中的任何一個。 – stackErr

是肯定我將只是更新我的jsfiddle – user2212564

您可以將對象的背景未設置爲兩個不同的圖像。

如果你想要的圖標來改變一下，你可以創建一個單獨的div來顯示圖標。

CSS：

.labelItem .icon { 
    margin-top: -6px; 
    margin-right: 15px; 
    float: right; 
    width: 30px; 
    height: 30px; 
} 

#iconUniversity { 
    background: url('http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Business-Graduation-cap-icon.png') no-repeat; 
} 

.active #iconUniversity { 
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') no-repeat; 
}

HTML：

<input type="checkbox" id="university" class="checkbox" /> 
    <div class="labelItem"> 
     <label for="university">University</label> 
     <div id="iconUniversity" class="icon">&nbsp;</div> 
    </div>

這裏是一個工作示例：http://jsfiddle.net/f8hVn/2/

也似乎有id和class混淆的概念。該id應該是唯一的 - 你會使用id如果你需要同class的不同對象之間進行區分。一個class是你應該分配給多個對象，你想看起來一樣。對象可以有多個class，但只有一個id。

在這個例子中，你應該使用對於所有這些項目之間共享位和背景的class。您應該使用id作爲每個項目需要不同的圖標。

來源

2013-07-02 15:20:21 Corion

這是有道理的，我感謝您的ID和類，我已經改變了他們很多次 - 是我的代碼是從更新亂七八糟，一旦應用我會更新我的jsFiddle讓你可以看到一個可行的例子。謝謝 – user2212564

@ user2212564正如我所說的......問題出在您的HTML代碼中。 – Alvaro

這裏唯一的問題是，單擊該div不會自動選中或取消選中該複選框。我更新了代碼和[這裏是一個稍微好一點的版本]（http://jsfiddle.net/av8zp/2/），但它有點混亂。除非你需要實際的複選框，否則你應該只需跟蹤對象的狀態或類或JavaScript對象。 – Corion

嗯......你需要一個白色的圖標首先:)的

然後，只需添加以下樣式爲active狀態：

.university.active{ 
    color:white; 
    margin-left:-12px; 
    background: url('URL_WITH_WHITE_ICON') 210px center no-repeat; 
}

活生生的例子：http://jsfiddle.net/vvvRX/1/（對第二個按鈕）

此外，請注意，您多次使用編號padding ...應該是一個班級。

UPDATE

如果你想保持兩個背景在同一時間，那麼你就有麻煩了。您將需要利用:before或:after性質，相對爲標籤which are not supported by older versions of many browsers.

位置：標籤{ 顏色：＃40403e; 背景：＃dbdcd4; 位置：相對; }

而且:after風格與新背景：

.university.active:after{ 
    content:''; 
    position: absolute; 
    z-index:3; 
    color:white; 
    right:-12px; 
    top:-2px; 
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') 210px center no-repeat ; 
    width:100%; 
    height:100%; 
}

活生生的例子：http://jsfiddle.net/vvvRX/3/

更新2

你的主要問題是你的HTML代碼。如果你正確地創建了它，它會更加簡單。例如，使用項目列表並在右側爲圖標添加span元素。然後，您可以單獨處理活動狀態的列表背景或跨度背景。

嘛，我不是要去解釋你的一切，但只是看看怎麼會事應該完成的事情：

http://jsfiddle.net/vvvRX/4/

來源

2013-07-02 14:49:47 Alvaro

打敗我，只是有一個鏈接在這裏，我有！ http://jsfiddle.net/dknhm/5/我唯一的問題是我需要像頂部和白色圖標的灰色箭頭。我可以得到一個塊bgcolour工作，但不是灰色箭頭圖像和白色圖標與他們是兩個圖像。感謝您的耐心 – user2212564

感謝您的幫助..嗯，我不知道是否有一種方法，我可以做一個if語句在jQuery而不是使用：在我將看看這個！ – user2212564

您的主要問題是您的HTML代碼。如果你正確地創建了它，它會更加簡單。例如，使用項目列表並在右側爲圖標添加一個'span'元素。然後，您可以單獨使用列表背景或「主動」狀態的跨度背景。看看一些適當的網站，你會意識到這些事情通常是如何完成的。 – Alvaro

ToggleClass使用複選框標籤

回答

UPDATE

更新2

相關問題