jQuery：無法刪除類

我做了一個喜歡/不喜歡的腳本，像這樣工作：2個按鈕與rate_deal類。當你點擊喜歡或不喜歡按鈕時，它會從兩個按鈕中刪除rate_deal類，以防止再次點擊，然後添加一些類以獲得更好的效果。jQuery：無法刪除類

我有一個問題。我不知道我做錯了什麼，但是當我點擊一個按鈕時，我無法刪除這兩個按鈕的rate_deal類。

下面是代碼：

HTML：

<div class="content_r_d_left_rate" id="deal-1"> 
<span class="rate_deal content_r_d_l_rate_img_up"></span> 
<span class="rate_deal content_r_d_l_rate_img_down"></span> 
</div>

的jQuery：

$(".rate_deal").click(function(){ 

     var dealIdRaw = $(this).parent().attr('id'); 
     var dealId = dealIdRaw.replace('deal-', ''); 

     $('#'+dealIdRaw).children().removeClass('rate_deal'); 

     if($(this).hasClass('content_r_d_l_rate_img_up')) 
     { 
      $('#'+dealIdRaw+' > .content_r_d_l_rate_img_down').addClass('content_r_d_l_rate_img_down_i'); 
      $('#'+dealIdRaw+' > .content_r_d_l_rate_img_down').removeClass('content_r_d_l_rate_img_down'); 
     } 
     else 
     { 
      $('#'+dealIdRaw+' > .content_r_d_l_rate_img_up').addClass('content_r_d_l_rate_img_up_i'); 
      $('#'+dealIdRaw+' > .content_r_d_l_rate_img_up').removeClass('content_r_d_l_rate_img_up'); 
     } 
    });

來源

2013-10-11 sorinu26

我不不知道什麼是錯的，因爲它在這裏效果很好：http://jsfiddle.net/LCHZ7/ – musicnothing

它也適用於我。 http://jsfiddle.net/Tentonaxe/ZW4bh/#&togetherjs=S0DA9H4pGJ –

如果添加警報，您將看到每次單擊該按鈕即使「rate_deal」類被刪除，腳本也會執行。 – sorinu26

你有你寫你的代碼的方式一個結構性的問題。當你這樣做：

$(".rate_deal").click(function(){

這對點擊處理那些以DOM對象鎖定從現在開始，不管他們是否繼續有rate_deal類重視他們。所以，從結構上講，當你刪除類時，你的點擊處理程序不會被刪除。

您可以通過使用委派事件處理這樣的解決這一問題：

$(".content_r_d_left_rate").on("click", ".rate_deal", function(){

這時候".rate_deal"類是在點擊後的對象將僅火單擊處理程序。

塊：

var dealIdRaw = $(this).parent().attr('id'); 
    var dealId = dealIdRaw.replace('deal-', ''); 

    $('#'+dealIdRaw).children().removeClass('rate_deal');

也可以用這些選項的任意一個代替：

$(this).siblings().add(this).removeClass("rate_deal"); 

    $(this).parent().find(".rate_deal").removeClass("rate_deal"); 

    $(this).closest(".content_r_d_left_rate").find(".rate_deal").removeClass("rate_deal"); 

    $(this).parent.children().removeClass("rate_deal");

我更喜歡第3變化，因爲它是最耐破，如果你稍微修改您的HTML 。

簡化整個代碼塊應該是這樣：

$(".content_r_d_left_rate").on("click", ".rate_deal", function(){ 

    // get our common parent 
    var parent = $(this).closest(".content_r_d_left_rate"); 

    // remove existing .rate_deal classes in this block  
    // so no more clicks get processed 
    parent.find(".rate_deal").removeClass("rate_deal"); 

    // toggle classes based on what was clicked 
    if($(this).hasClass("content_r_d_l_rate_img_up")) { 
     parent.find(".content_r_d_l_rate_img_down") 
      .addClass("content_r_d_l_rate_img_down_i") 
      .removeClass("content_r_d_l_rate_img_down"); 
    } else { 
     parent.find(".content_r_d_l_rate_img_up") 
      .addClass("content_r_d_l_rate_img_up_i") 
      .removeClass("content_r_d_l_rate_img_up"); 
    } 
});

來源

2013-10-11 21:26:31 jfriend00

它的工作原理！感謝您解決這個問題，也爲了簡化代碼！ – sorinu26

我剛剛在腳本中添加了一個警報，並且我注意到在您的簡化版本中「rate_deal」類不會被刪除。 – sorinu26

@ sorinu26 - 是的，'.removeClass（）'行中有一個錯字（不應該是className之前的一段）。 – jfriend00

-1

既然你只是想去除點擊類的，以防止進一步的行動，你可以做到這一點 -

$('.rate_deal').bind('click',function(){ 

    $(this).parent().children().removeClass('rate_deal'); //this will remove 'rate_deal' class from both of them. 

    //here you can put your change image for up/down thumb logic. 

})

來源

2013-10-11 21:33:15 rougebot

這不會因爲.rate_deal類被刪除而停止點擊處理程序。爲此，必須使用委託事件處理。 – jfriend00

jQuery：無法刪除類

回答

相關問題