Question

我正在尝试遍历表格中的所有空文本框并更改其背景颜色。我正在使用以下JQuery代码：

    $("#btn2").click(function() {
            var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
            emptyTextBoxes.each(function() {
            this.css('background-color', '#ffff00');
//            $('#Col3Txtbx').css('background-color', '#ffff00');    
            });
        });

This似乎没有提到对我来说很奇怪的文本框。当我取消注释特定文本框时，它会重置背景颜色。

有人可以向我解释'这是'指的是什么吗？

Answer 1

每个功能的工作方式略有不同：

$("#btn2").click(function() {
  var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
  emptyTextBoxes.each(function(index, element) {
    $(element).css('background-color', '#ffff00');
  });
});

但是你可以在没有each（）的情况下完成这项工作：

$("#btn2").click(function() {
  var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
  emptyTextBoxes.css('background-color', '#ffff00');
});

更短的版本：

$("#btn2").click(function() {
  $("input:text[value='']").css('background-color', '#ffff00');
});

编辑：正如“rz”指出的那样，您仍然可以使用this关键字，但是您必须将该元素包装到jQuery对象中：

$("#btn2").click(function() {
  var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
  emptyTextBoxes.each(function() {
    $(this).css('background-color', '#ffff00');
  });
});

Answer 2

根据docs，每个回调将传递一个索引和有问题的元素，这将被设置为domElement。因此，请将this.css('background-color', '#ffff00')更改为$(this).css('background-color', '#ffff00');

Answer 3

改变颜色的是指按钮。如果你将它移动到你返回this.value的位置它可能会有效。

JQuery迭代文本框并更改其颜色

3 个答案: