好的，我有一张 table ，有两行。在右侧的单元格中，我有一个包含值(1、2 和 3)的下拉菜单。
根据选择的内容，我希望表格行中的内容更改特定的颜色。当我有一个表行时，我已经设法让它工作，并且它在值之间变化时工作正常。但是，当我复制我的代码以制作多行时，它停止工作。
有多行，如果我在第一行上单击值 2，它也会将第一行更改为正确的颜色，然后如果我更改第 5 行的值，无论我选择什么值，它都会更改为第一行我改变了。如果这是有道理的话。
代码如下......
-
CSS
<style>
table td,th{
border:1px solid black;
padding-left:100px;
}
table tr{
background-color:red;
}
.online{
background-color:green;
}
.offline{
background-color:red;
}
.paused{
background-color:orange;
}
</style>
-
HTML
<body>
<table id="table">
<tr style="background-color:grey;">
<th>
Hello
</th>
<th>
Is it
</th>
</tr>
<tr class="options">
<td>
yayaya
</td>
<td>
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr class="options">
<td>
yayaya
</td>
<td>
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
</body>
-
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>
在 jsfiddle 上，这样你就明白我的意思了。
http://jsfiddle.net/n3nFB/1923/
尝试一行，然后复制并通过下面的同一行
最佳答案
将所有 $('select').val() 更改为 this.value 以便您始终使用已更改的那个而不是第一个。
演示在 http://jsfiddle.net/gaby/n3nFB/1924/
此外，您可以一次调用删除多个类，并且可以链接以下 addClass
例如
$(this).parents('.options')
.removeClass('online offline paused')
.addClass('online');
关于javascript - Jquery:更改选择选项时将颜色更改为表行不工作多个表行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25688549/