javascript - Ajax 调用后未应用 AddClass 方法

标签 javascript jquery html css

<分区>

我正在尝试将 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 变量。我正在尝试向 div 旁边的元素添加一个 css 类。

$('.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>

那么我的代码有什么问题。

谢谢

最佳答案

You lose this context inside success handler

使用.bind(this)

var _this=this; 在 ajax 调用之前使用 $(_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 相关的回调的上下文

关于javascript - Ajax 调用后未应用 AddClass 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35794426/

上一篇:html - 在没有包装的情况下将一些 float 元素堆叠在一起

下一篇:css - 更改移动设备上的 Bootstrap 布局

相关文章:

javascript - 如何使用 HTML5 刮刮卡渲染随机背景

javascript - jQuery 不解析 HTML

javascript - 使这个 jQuery Ajax async=true 带有闭包

javascript - Bootstrap 模式不能按预期与 JS 一起工作

javascript - Sencha 触摸 : How to set a variable in JsonP request

jquery - 观察 jQuery 中的显示变化

javascript - JQuery `length` 属性无法正常工作。为什么?

html - 尽管是内联 block ,元素表现得像 block

javascript - jQuery 添加类到未删除的单选框

javascript - 下拉菜单更改表单中的电子邮件