在jQuery中更改類僅在第一次點擊時才起作用

對於所有jQuery專家，我可以使用您的幫助指出我的部分可能是一個愚蠢的錯誤。當用戶點擊一個帶有熱點類的div時，我試圖交換類onclick。下面的代碼在我第一次點擊時交換了課程，而不是第二次和以後的課程。此外，如果有更清晰的方式來完成這個請讓我知道。在jQuery中更改類僅在第一次點擊時才起作用

在此先感謝您的專業知識。

的jQuery：

$('.hotspot').click(function() { 
    if($(this).parent().attr("class") == 'checked'){ 
     $(this).parent().removeClass('checked').addClass('unchecked'); 
    } 
    if($(this).parent().attr("class") == 'unchecked'){ 
     $(this).parent().removeClass('unchecked').addClass('checked'); 
    } 
});

標記：

<ul id="prettyCheck"> 
    <li class="checked"> 
      <div class="hotspot"></div> 
      <div class="desc"><div class="descPad">Some text</div></div> 
    </li> 
    <li class="unchecked"> 
      <div class="hotspot"></div> 
      <div class="desc"><div class="descPad">Some text</div></div> 
    </li> 
</ul>

來源

2010-02-10 Sheldon

試試這個

$('.hotspot').toggle(function() { 
     $(this).parent().removeClass('checked'); 
     $(this).parent().addClass('unchecked'); 
     // do more here... 
    }, 
    function(){ 
     $(this).parent().removeClass('unchecked'); 
     $(this).parent().addClass('checked'); 
     // do more here... 
});

或

$('.hotspot').click(function() { 
     $(this).parent().toggleClass('checked'); 
     $('checkbox selector').attr('checked', $(this).parent().hasClass('checked')); 
     // do more here... 
    });

來源

2010-02-10 05:53:55 Reigel

謝謝！肯定會越來越近，切換工作得很好，我發現我可以根據需要繼續添加，唯一的問題是，當班級默認爲未選中時，我必須在班級切換之前點擊兩次。我曾嘗試交換功能，但只有在檢查時導致相同的情況纔是默認設置。 – Sheldon 2010-02-10 06:00:48

嘗試我的更新以上... – Reigel 2010-02-10 06:01:51

你的更新是完美的切換類，我仍然搞清楚如何做切換後，我需要的條件事物，即。除了複選框以外，還顯示/隱藏了其他div。 – Sheldon 2010-02-10 06:14:08

你試過沒有chaning？

$('.hotspot').click(function() { 
    if($(this).parent().attr("class") == 'checked'){ 
     $(this).parent().removeClass('checked'); 
     $(this).parent().addClass('unchecked'); 
    } 
    if($(this).parent().attr("class") == 'unchecked'){ 
     $(this).parent().removeClass('unchecked'); 
     $(this).parent().addClass('checked'); 
    } 
});

來源

2010-02-10 05:27:03 Sarfraz

你敢打賭，和鏈式單行相同的結果，第一次工作，但不是以後的時間。 – Sheldon 2010-02-10 05:39:56

我認爲問題是，如果類已經被選中，那麼第一if語句將取消它，那麼接下來if將重新檢查它。嘗試將第二個if更改爲else if，然後查看是否可以爲您解決問題。我這樣做了，也做了什麼sberry2A建議通過替換.attr('class') == 'checked'與.hasClass('checked')，它是爲我工作。

編輯：至於爲什麼你只能用你的原代碼，一旦切換每個元素，這是因爲如果類的名字都是一模一樣「檢查」（和同樣爲.hasClass('unchecked')的測試.hasClass('checked')只會是真實的和類名「unchecked」）。 jQuery的addClass()函數會爲您提供的類提供一個空間，所以如果您告訴它添加「checked」類，它會將字符串「checked」添加到類名。因此，以類名「checked」開頭的元素將被修改爲使類名稱「未選中」，並且不再與您的if語句中的任何一個相匹配，從而防止它再次觸發。這就是爲什麼sberry2A建議使用hasClass()，因爲如果元素的類名包含傳遞它的類，即使類名中有額外的空間或其他類，它也會返回true。

來源

2010-02-10 06:16:57

Got it！除了Reigels代碼之外，我還可以將ID添加到每個熱點，並將其用於其他onclick函數來執行我需要的任何操作。

感謝您的幫助！

來源

2010-02-10 06:17:04 Sheldon

在jQuery中更改類僅在第一次點擊時才起作用

回答

相關問題