Question

我试图将CSS类应用于我的DOM HTML元素。这是我的HTML代码：i中插入div元素。

<div class="delete delete_next"  data-url="{{call.url}}"  data-def="{{ call.person._id }}" data-annonce="{{ annonce._id }}"><i class="fa fa-check"></i></div>

在Javascript中我正在进行Ajax查询。如果json data.url我得到的等于我在JS中的url变量。我试图将css类添加到div旁边的元素。

$('.delete_next').each(function(){

    var diff = $(this).data('def');
    var annonce = $(this).data('annonce');
    var url = $(this).data('url');

    $.ajax({
        url: 'index.php',
        data: {
            module: 'admin',
            action: 'call_url',
            diff: diff,
            ann: annonce
        },
        dataType : 'json',
        success : function(data){
            if(data.url == url){
                $(this).next().addClass('valdiate');
           }
        }
    })
});

最后这里是CSS课程：

<style>
    .valdiate{
        color: #327334;
        opacity: 1;
    }
</style>

我的代码中出了什么问题。

由于

Answer 1

您在this处理程序
中丢失了success个上下文

使用.bind(this)

OR

在ajax调用之前

var _this=this;并使用$(_this).next().addClass('valdiate');

试试这个：

$('.delete_next').each(function() {
  var diff = $(this).data('def');
  var annonce = $(this).data('annonce');
  var url = $(this).data('url');

  $.ajax({
    url: 'index.php',
    data: {
      module: 'admin',
      action: 'call_url',
      diff: diff,
      ann: annonce
    },
    dataType: 'json',
    success: function(data) {
      if (data.url == url) {
        $(this).next().addClass('valdiate');
      }
    }.bind(this)
  })
});

修改：您还可以在ajax settings中使用context，此对象将是所有与Ajax相关的回调的上下文

Answer 2

将此变量用于当前元素

$('.delete_next').each(function(){
    var curelm = $(this);
    var diff = $(this).data('def');
    var annonce = $(this).data('annonce');
    var url = $(this).data('url');

    $.ajax({
        url: 'index.php',
        data: {
            module: 'admin',
            action: 'call_url',
            diff: diff,
            ann: annonce
        },
        dataType : 'json',
        success : function(data){
            if(data.url == url){
                curelm.next().addClass('valdiate');
           }
        }
    })
});

Ajax调用后未应用AddClass方法

2 个答案: