切換類點擊HREF

我有一個Ajax請求上點擊A HREF這是一組HREF的具有相同類.button的一部分火災。該HTML看起來像這樣：切換類點擊HREF

<div id="button-container"> 
    <a href="#" class="button red" data-id="1"></a> 
    <a href="#" class="button red" data-id="2"></a> 
    <a href="#" class="button red" data-id="3"></a> 
    <a href="#" class="button red" data-id="4"></a> 
</div>

因爲，在href的具有類.button是自己通過一個單獨的Ajax調用加載到DIV #button-container和頁面加載過程中不可用的，我在使用jQuery（）火阿賈克斯請點擊.button HREF的。 javascript看起來像這樣：

jQuery('#button-container').on('click', '.button', function(e){ 
    e.preventDefault(); 

    var id = jQuery(this).data('id'); 

    jQuery.ajax({ 
     url: ajaxVars.ajaxurl, 
     type:'POST', 
     async: true, 
     cache: true, 
     timeout: 10000, 
     data: 'action=button_action&id=' + id, 
     success: function(value){ 
      if (parseInt(value) == id) { 
       jQuery(this).removeClass('red').addClass('green'); 
      } else { 
       jQuery(this).removeClass('green').addClass('red'); 
      } 
     }, 
     error: function() { 
      //alert(error); 
     } 
    }); 
});

ajax根據需要觸發，我從服務器獲得成功響應。如果成功，我需要代表的HREF .button從.red顏色的類切換到.green，反之亦然。這是我遇到問題的地方。我得到一個錯誤a.ownerDocument is undefined在控制檯中。這在移除課程時似乎會發生。另外，我需要「僅切換點擊的href類」，因此我正在使用jQuery(this)。

有關如何在上述場景中單獨切換href類的任何想法？

問候，約翰

來源

2012-03-29 John

嗯，我設置一個的jsfiddle與此並沒有得到同樣的錯誤。成功方法中的真假都改變了課堂，沒有錯誤。 – j08691 2012-03-29 14:47:24

裏面你.ajax()成功回調，this不是錨。你可以通過傳遞一個context屬性作爲一個選項，迫使它是被點擊的錨：

jQuery.ajax({ 
    url: ajaxVars.ajaxurl, 
    type:'POST', 
    async: true, 
    cache: true, 
    timeout: 10000, 
    data: 'action=button_action&id=' + id, 
    context: this, // <-- HERE 
    success: function(value){ 
     if (parseInt(value, 10) == id) { 
      jQuery(this).removeClass('red').addClass('green'); 
     } else { 
      jQuery(this).removeClass('green').addClass('red'); 
     } 
    }, 
    error: function() { 
     //alert(error); 
    } 
});

來源

2012-03-29 14:41:10 bfavaretto

這工作！絕對簡單，最好的解決方案。 Thx尋求幫助。 – John 2012-03-29 15:55:50

不知道，但也許$（這）不是指的按鈕你點擊了，嘗試緩存$（這）在一個變量$就調用之前，然後使用該變量來刪除/添加類。

var $this = $(this); 
jQuery.ajax({ 
    .......... 
    success: function(value) { 
     ...... 
      $this.removeClass('red').addClass('green');

來源

2012-03-29 14:38:14 ninja

您的解決方案工作。不過，我解決方案是一個班輪。我感謝幫助！ – John 2012-03-29 15:59:35

我會嘗試：

if (parseInt(value) == id) { 
    jQuery("#" + id).removeClass('red').addClass('green'); 

} else { 
    jQuery("#" + id).removeClass('green').addClass('red'); 
}

，並在你的HTML id屬性添加到a標籤

來源

2012-03-29 14:39:18 MatuDuke

試過這個。但沒有工作。 Thx尋求幫助。 – John 2012-03-29 16:00:53

切換類點擊HREF

回答

相關問題