Jquery使用"这个"在类函数中添加类。作为参考

时间:2016-01-28 12:45:43

标签: jquery function class this

我尝试使用类作为addClass removeClass的引用和jquery(this)。我需要像类一样的通用引用,因为我在页面中添加了动态元素,并且需要所有这些元素来使用该函数。

当我通过ID引用元素时,一切都很好。当我按类别引用元素时,我似乎无法修改类或输入的值。

HTML

<input id="part"  size="15" type="text" class="part" name="part" value=""/>

Jquery(响应好; AddClass,RemoveClass,this.val(数据),不行)

$(document).on('blur', '.part', function(){
    var oldNumber = $(this).val().toUpperCase();
    $.post("part-interchange.php",{ part:$(this).val() } ,function(data) {
    //no data back then add class Red remove Green
        if (data=='no') {
                $(this).removeClass('shadeChange');
                $(this).removeClass('shadeGood');
                $(this).addClass('shadeBad');
        } else if (data=='yes') {
        $(this).removeClass('shadeChange');
                $(this).removeClass('shadeBad');
                $(this).addClass('shadeGood');
         } else if (data!='yes') {
                $(this).removeClass('shadeBad');
                $(this).removeClass('shadeGood');
                $(this).addClass('shadeChange');
                $(this).val(data);
           }
     });
}); 

但是,如果我使用html ID引用Jquery Works

工作Jquery

$(document).ready(function() {
        $("#part").blur(function() {
            var oldNumber = $("#part").val().toUpperCase();
            $.post("part-interchange.php",{ part:$("#part").val() } ,function(data) {
                //no data back then add class Red remove Green
                if (data=='no') {
                    $("#part").removeClass('shadeChange');
                    $("#part").removeClass('shadeGood');
                    $("#part").addClass('shadeBad');
                    }
                // else if is part then add green remove red
                 else if (data=='yes') {
                    $("#part").removeClass('shadeChange');
                    $("#part").removeClass('shadeBad');
                    $("#part").addClass('shadeGood');
                 }
                 else if(data!='yes') {
                     $("#part").removeClass('shadeBad');
                     $("#part").removeClass('shadeGood');
                     $("#part").addClass('shadeChange');
                     $("#part").val(data);
                 }
                     });
                });
        });

CSS

.shadeGood{background-color:#D9F2E6;font-weight:700;color:#390}
.shadeBad{background-color:#F7E6E9;font-weight:700;color:red}
.shadeChange{background-color:#c7d9fc;font-weight:700;color:#0028f0}

3 个答案:

答案 0 :(得分:1)

上下文中的

proc.stdout在ajax响应中发生了变化:稍微改进了代码

data = [{'name': 'Jack'}, {'age': '28'}]

new_dict = {}
for d in data:
    new_dict.update(d)

new_data = [new_dict]

print new_data

答案 1 :(得分:0)

var Thisit = $(this)之前定义$.post()并使用Thisit代替$(this),因此您的代码应该类似于

$(document).on('blur', '.part', function(){
    var ThisIt = $(this);
    var oldNumber = ThisIt.val().toUpperCase();
    $.post("part-interchange.php",{ part: ThisIt.val() } ,function(data) {
    //no data back then add class Red remove Green
        if (data=='no') {
                ThisIt.removeClass('shadeChange');
                ThisIt.removeClass('shadeGood');
                ThisIt.addClass('shadeBad');
        } else if (data=='yes') {
                ThisIt.removeClass('shadeChange');
                ThisIt.removeClass('shadeBad');
                ThisIt.addClass('shadeGood');
         } else if (data!='yes') {
                ThisIt.removeClass('shadeBad');
                ThisIt.removeClass('shadeGood');
                ThisIt.addClass('shadeChange');
                ThisIt.val(data);
           }
     });
}); 

答案 2 :(得分:0)

请注意,Ajax调用成功的内容在不同的范围内。一个简单的console.log(this)将告诉你。

那你能做什么?你可以在里面bind the function或更容易,在外面定义并使用它。

$(document).on('blur', '.part', function() {
  var part = $(this);
  var oldNumber = $(this).val().toUpperCase();
  $.post("part-interchange.php", {
    part: $(this).val()
  }, function(data) {
    //no data back then add class Red remove Green
    if (data == 'no') {
      part.removeClass('shadeChange removeClass').addClass('shadeBad');
    } else if (data == 'yes') {
      part.removeClass('shadeChange shadeBad').addClass('shadeGood');
    } else if (data != 'yes') {
      part.removeClass('shadeBad shadeGood').addClass('shadeChange').val(data);
    }
  });
});