Question

我有一个Ajax请求，点击一个href是一组具有相同类.button的href的一部分时触发。 HTML看起来像这样：

<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>

因为，具有类.button的href本身通过单独的ajax调用加载到div #button-container中并且在页面加载期间不可用，我使用jQuery on（）来激活ajax调用点击.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类的任何想法？

此致约翰

Answer 1

不确定，但也许$（this）没有引用您单击的按钮，尝试在$ .ajax调用之前在变量中缓存$（this），然后使用该变量删除/添加类。

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

Answer 2

在.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);
     }
});

Answer 3

我会尝试：

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

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

并在您的html将id媒体资源添加到a代码

切换点击的href类

3 个答案: