如何更改选定行中输入的颜色

Question

我可以在我的 JS 中添加什么来切换输入文本的 class？目前行背景被 .remove 切换，但我不知道如何切换输入内文本的 class。

我的HTML:

<div class='row shopping'>
    <div><input type='text' id='item' value='1'></div>
    <div><input type='text' id='cost' value='1'></div>
    <div><input type='text' id='group' value='1'></div>
    <div><input type='text' id='code' value='1'></div>
</div>

我的 JS：

$('.shopping').click(function(){
    $(this).toggleClass('remove');
 });

我的 CSS:

.remove{
   background-color:red;
 }

Answer 1

在此代码中：

$('.shopping').click(function(){
  $(this).toggleClass('remove');
});

关键字 this 指的是附加了 click 处理程序的元素，在本例中是任何带有 shopping class 的元素。在不更改标记的情况下，您可以将 <input> 元素置于中 .shopping 元素：

$('.shopping input').click(function(){
  $(this).toggleClass('remove');
});

在这种情况下，this 将引用 <input>，因为这是附加了 click 处理程序的元素。

Answer 2

考虑以下因素。

$(function() {
  $('.shopping').click(function() {
    $("input", this).toggleClass('remove');
  });
});

.remove {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row shopping'>
  <div><input type='text' id='item' value='1'></div>
  <div><input type='text' id='cost' value='1'></div>
  <div><input type='text' id='group' value='1'></div>
  <div><input type='text' id='code' value='1'></div>
</div>
<div class='row shopping'>
  <div><input type='text' id='item' value='2'></div>
  <div><input type='text' id='cost' value='2'></div>
  <div><input type='text' id='group' value='2'></div>
  <div><input type='text' id='code' value='2'></div>
</div>

调用 click 事件时，this 与被单击或调用的元素相关。然后我们要定位该元素中的 input 个元素。

选择器 $("input", this) 与 $(this).find("input") 相同，因此两者都可以使用。

如何更改选定行中输入的颜色

How do i change color on inputs in a selected row

jquery