我尝试使用类作为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}
答案 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);
}
});
});