如何实现选中行内input输入框文本的CSS类切换

云上老周

2026-9-3

实现方案

你当前代码无法生效的核心原因有两个：

仅给外层.shopping行切换了类，没有针对内部input做样式匹配
浏览器默认给input输入框加了不透明白色背景，会盖住父级行的背景色，且input的文本样式默认不会完全继承父元素属性

方案1：最少代码实现（无需修改原有JS逻辑）

不需要额外写JS操作input的类，直接利用CSS后代选择器，通过父级已切换的.remove类直接控制内部input样式即可。
你只需要补充修改CSS为如下内容：

.remove{
   background-color:red;
}
/* 匹配带.remove类的行内部的所有input */
.remove input {
  /* 去掉input默认白色背景，露出父级的红色 */
  background-color: transparent;
  /* 这里写你要的文本效果，示例是删除线+浅灰色文字，可自行调整 */
  text-decoration: line-through;
  color: #f0f0f0;
}

方案2：单独给input切换类名（如果你需要单独控制input的类）

如果你确实需要给input本身切换独立的类名，只需要在原有点击事件里加一行选中内部input、切换类的逻辑即可。
修改后的JS代码：

$('.shopping').click(function(){
    $(this).toggleClass('remove');
    // 选中当前点击行内的所有input，同步切换文本样式类
    $(this).find('input').toggleClass('input-removed');
});

配套补充CSS：

.remove{
   background-color:red;
}
/* 去掉input默认背景 */
.remove input {
  background-color: transparent;
}
/* input专属的文本样式类 */
.input-removed {
  text-decoration: line-through;
  color: #f0f0f0;
}