css類根據點擊事件不能正確切換

我目前有一個帶默認減號的div，當我點擊它時，它會改變爲加號，但是當我再次點擊加號時，它不會切換回減號標誌。我怎樣才能改變我的JavaScript，以便它在基於點擊的類之間切換？css類根據點擊事件不能正確切換

$(document).on('click', '.header', function (event) { 
    $(this).nextUntil(".header").toggle(); 
    document.getElementById("toggleIcon").className = "icon-plus"; 
});

默認爲圖標減，當我點擊它，它改變圖標加，當我再次點擊它應該切換回圖標減，但它不是做那。

根據需要HTML

<div class="accordion-group" data-bind="foreach: Types"> 
    <div class="text_x-large header"> 
     <span data-bind="text:Name()"></span> 
     <span id="toggleIcon" class="icon-minus"></span> 
    </div> 
    <div data-bind="foreach: Users"> 
     <!-- ko if: Letter --> 
     <div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div> 
     <!-- /ko --> 
     <div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div> 
    </div> 
</div>

來源

2013-10-30 Masriyah

我會建議使用該元素的toggleClass和地址可見通過CSS的圖標更改類。 –

使用toggleClass切換的類名：

$(document).on('click', '.header', function (event) { 
    $(this).nextUntil(".header").toggle(); 
    $("#toggleIcon").toggleClass("icon-plus icon-minus"); 
});

我有多個div當我在第二或第三次DIV單擊它僅更改第一格的圖標

在這種情況下，您不應該使用id來選擇它。將toggleIcon更改爲class，然後使用它。

$(".toggleIcon", $(this)).toggleClass("icon-plus icon-minus");

來源

2013-10-30 14:09:52

這個工程，但因爲我有多個div當我點擊第二個或第三個div它只改變了第一個div的圖標 – Masriyah

我會用下面一行：

$("#toggleIcon").toggleClass("icon-minus");

.toggleClass（）可以添加類，如果它不存在，並刪除它，如果它是。您可以在此處閱讀完整文檔：http://api.jquery.com/toggleClass/

該圖標的默認樣式應爲加號，並且一旦添加了圖標減號後，圖像應該會更改。這樣你就不需要使用更多的代碼行來添加/刪除第二個類。

來源

2013-10-30 14:12:20

這樣，它應該工作：

$(document).on('click', '.header', function (event) { 
    $(this).nextUntil(".header").toggle(); 
    if($(this).nextUntil(".header").is(':visible')) 
     document.getElementById("toggleIcon").className = "icon-minus"; 
    else 
     document.getElementById("toggleIcon").className = "icon-plus"; 
});

你忘了設置圖標減去當DIV打開

來源

2013-10-30 14:15:12

這也適用，但我有多個div在其中我應用此和改變隻影響第一DIV。當我點擊第二個或第三個div時，只有第一個div的圖標正在改變 – Masriyah

您能否將您的html添加到您的答案？無論如何，這是因爲jQuery沒有選擇正確的圖標，而是選擇了所有的圖標。我的錯。您應該使用jQuery的遍歷實用程序函數來獲取單個圖標。但建議你，我需要你的HTML。 –

我真的很感謝幫助。我使用html更新了我的帖子，以便查看 – Masriyah

css類根據點擊事件不能正確切換

回答

相關問題