Javascript Jquery：当select选项更改时，是否将颜色更改为表行？是否不处理多个表行？

好的，我有一张两排的桌子。在右边的单元格中，我有一个下拉菜单，其中有值（1、2和3）

根据选择的不同，我希望表中的行改变特定的颜色。当我有一个表行，并且在值之间进行更改时，我成功地实现了这一点。但是，当我复制代码以生成多行代码时，它会停止工作

对于多行，如果我单击第一行上的值2，它也会将第一行更改为正确的颜色，然后如果我更改值（如第5行），无论我选择什么值，它都会更改为我更改的第一行的颜色。如果这有道理的话

这是密码

-

CSS

表td，th{
边框：1px纯黑；
左侧填充：100px；
}
表tr{
背景色：红色；
} 
.在线{
背景颜色：绿色；
}
.离线{
背景色：红色；
}
.暂停{
背景颜色：橙色；
}

-

HTML

你好
它是
日语
1.
2.
3.
日语
1.
2.
3.

-

JQUERY

<script>
$('select').change(function(){ 
    if($('select').val() == "2"){ 
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
        $(this).parents('.options').addClass('online'); 
    }else if($('select').val() == "1"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('offline'); 
    }else if($('select').val() == "3"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('paused'); 
    }
});
</script>

$（'select'）.change（函数（）{
如果（$（'select'）.val（）=“2”）{
$（this）.parents（'.options'）.removeClass（'online'）；
$（this）.parents（'.options'）.removeClass（'offline'）；
$（this）.parents（'.options'）.removeClass（'paused'）；
$（this）.parents（'.options'）.addClass（'online'）；
}else if（$（'select'）.val（）=“1”）{
$（this）.parents（'.options'）.removeClass（'online'）；
$（this）.parents（'.options'）.removeClass（'offline'）；
$（this）.parents（'.options'）.removeClass（'paused'）；
$（this）.parents（'.options'）.addClass（'offline'）；
}else if（$（'select'）.val（）=“3”）{
$（this）.parents（'.options'）.removeClass（'online'）；
$（this）.parents（'.options'）.removeClass（'offline'）；
$（this）.parents（'.options'）.removeClass（'paused'）；
$（this）.parents（'.options'）.addClass（'paused'）；
}
});

在这里，它位于JSFIDLE上，这样您就可以明白我的意思了

尝试使用一行，然后复制并通过下面的同一行将所有

$（'select'）.val（）

更改为

此.value

，这样您就可以使用已更改的一行，而不是始终使用第一行

演示

---

此外，您可以通过一次调用删除多个类，并且可以链接以下

addClass

比如说

$(this).parents('.options')
       .removeClass('online offline paused')
       .addClass('online');

---

在

演示时，您希望使用

$（this）.val（）

否则您将获得所有选择的val。也不确定这是否是延迟粘贴，但您选择的ID应该是uniqueor$（this）.val（）以保持jquery。不需要，因为他可以访问原始对象，并且

值
是它的属性。不需要，但它是jquery方式，所以可能更可读。@LaurensKling，jquery方式不是将所有内容包装在jquery对象中。如果您可以安全（跨浏览器）且无需额外步骤即可使用本机代码，则建议您这样做（性能和清晰度）。每个人都有自己的风格：），但现在Matthew有两个选项可供选择：）
<script>
$('select').change(function(){ 
    if($('select').val() == "2"){ 
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
        $(this).parents('.options').addClass('online'); 
    }else if($('select').val() == "1"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('offline'); 
    }else if($('select').val() == "3"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('paused'); 
    }
});
</script>

$(this).parents('.options')
       .removeClass('online offline paused')
       .addClass('online');