Question

jQuery $（this）在我的代码中根本不起作用，这里是代码。从我的HTML发送的代码是图像的onlick'vote'，位于表格的tb元素中。

function vote(type, value, musicId) {
  var dataFields = {
    'type': type,
    'value': value,
    'musicId': musicId
  };
  $.ajax({
    type: "POST",
    url: "ajax/voting.php",
    data: dataFields,
    timeout: 3000,
    success: function(dataBack) {
      $(this).css("background-color", "rgba(255,255,0,0.7)");
    },
    error: function() {
      $('#message').text('Problem!');
    }
  });
}

HTML＆amp; PHP代码：

echo '<td class="up"><img class="liked" onclick="vote(\'liked\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/like.png"></td>';

 echo '<td class="down"><img class="favorite" onclick="vote(\'favorite\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/favorite.png"></td>';

我想做什么？

因为从数据库中生成了多个项目，并且我想让jquery在单击某个项目中的投票图像时将它们分开。

你能帮我找一下错误的位置吗？感谢。

Answer 1

回调中的

this为window。通常的解决方案是将外部this保存在变量中。

但问题的一部分是你在内联事件处理程序而没有传递元素，因此this中的vote甚至不是元素。最好的解决方案是避免使用内联javascript（例如设置具有相关音乐ID的数据属性），但是一个可行的解决方案是：

function vote(element, type, value, musicId) {
    var dataFields = {'type': type, 'value': value, 'musicId': musicId};
    $.ajax({
        type: "POST",
        url: "ajax/voting.php",
        data: dataFields,
        timeout: 3000,
        success: function(dataBack){
                $(element).css("background-color","rgba(255,255,0,0.7)");
        },
        error: function() {
            $('#message').text('Problem!');
        }
    });
}

echo '<td class="down"><img class="favorite" onclick="vote(this, \'favorite\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/favorite.png"></td>';

Answer 2

Denys的另一种解决方案是将this作为上下文传递

$.ajax({
    type: "POST",
    url: "ajax/voting.php",
    data: dataFields,
    timeout: 3000,
    context: this, // <-----
    success: function(dataBack) {
      $(this).css("background-color", "rgba(255,255,0,0.7)");
    },
    error: function() {
      $('#message').text('Problem!');
    }
});

在您的示例中，我们很难弄清楚this到底是什么，因为我们不知道您正在使用它的上下文。

如果您只是调用该函数，那么this引用window - 而ajax函数内的this引用window

vote(a,b,c);

如果您将函数作为回调传递给事件处理程序，则this引用该元素，而ajax成功函数内的this引用window。所以你需要缓存它或将其作为上下文传递

$(element).on('click',vote)

jQuery $（this）在我的代码中根本不起作用？

2 个答案: