Question

Les说我有一些同班的按钮。在页面加载时，我正在使用每个按钮的ajax检查一些值。根据ajax请求的返回值，我想在按钮中添加一些类，但它不起作用，

$(document).ready(function(){
    $('.add-remove-permissoion').each(function(){
        var child = $(this).val();
        var parent = $('#parent-name').text();
        $.get('my-url', function(data){
            if(data == 1){
                $(this).addClass('glyphicon glyphicon-ok');
            }else{
                $(this).addClass('emptybox-blank');
            }
        });
    });
});

我检查过我的ajax请求正在返回正确的数据。我在这里做错了什么？

Answer 1

问题是ajax回调中的这个引用，success回调this引用jqXHR对象而不是dom元素引用，这就是它无法工作的原因。< / p>

您可以使用下面给出的闭包变量来解决问题

$(document).ready(function () {
    $('.add-remove-permissoion').each(function () {
        var $this = $(this),
            child = $this.val();
        var parent = $('#parent-name').text();
        $.get('my-url', {}, function (data) {
            if (data == 1) {
                $this.addClass('glyphicon glyphicon-ok');
            } else {
                $this.addClass('emptybox-blank');
            }
        });
    });
});

Answer 2

ajax调用中的问题$(this)并未引用单击的按钮。

将$(this).addClass替换为myElement.addClass。在ajax调用之前的点击事件中创建myElement：var myElement = $(this)。

Answer 3

this处理程序的上下文中的

$.get未引用当前迭代的元素。每个函数都有自己的this值。你有几个选择。

使用each回调的第二个参数。

$('.add-remove-permissoion').each(function(index, element) {

使用$.proxy或Function.prototype.bind方法设置处理程序的this值。
```
$.get('my-url', function(data) {
    // ...
}.bind(this));
```

缓存this处理程序的each值，并在$.get处理程序中使用它。

var elem = this;
$.get('my-url', function(data) {
    // ...
    $(elem)...
});

另请注意，代码中存在语法错误：

$.get('my-url'}, function(data){
// -----------^

条件addClass不适用于具有相同类的每个元素

3 个答案: