如何将单个css类用于多个ID？

Question

我正在尝试将以下CSS应用于给定div ID下的多个div。

.strikeout
{
    background : blue;
}

我使用以下javascript代码更改网格中所选行的颜色

$("#jqxGridInvoiceEntry").on("cellvaluechanged", function (event){
    var rowindex = event.args.rowindex;
    var checkboxState=event.args.value;
    var rowTag=$("#row"+rowindex+"jqxGridInvoiceEntry div");

    if(checkboxState==true)
    {
        rowTag.addClass("strikeout");
    }
    else
    if(checkboxState==false)
    {
        rowTag.removeClass("strikeout");
    }
});  

见下面的screeshot。当我选择第一行中的复选框时，其背景颜色变为蓝色。问题是当我选择第二行中的复选框时，其背景颜色会变为蓝色，但之前选择的行的背景颜色会消失。第一行ID将是row0jqxGridInvoiceEntry，依此类推以用于后续行。

我正在使用JQWidgets框架。 HTML代码是

<div style="float: left;" id="jqxGridInvoiceEntry"></div>

Answer 1

从您发布的代码判断，唯一的可能性是cellvaluechanged事件也会触发第一行，可能是因为当您检查第2行中的另一个复选框时，其中的复选框未选中。

此代码：

else
if(checkboxState==false)
{
    rowTag.removeClass("strikeout");
}

将删除背景颜色。

Answer 2

我认为jquery实现的方式有点混乱。在这里，我将以不同的方式实现相同的结果。

<强> HTML

 <table cellpadding="0" cellspacing="0" border="0" width="100%" id="MainTable">
<tr>
    <td>First</td> 
    <td><input type='checkbox'  /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
<tr>
    <td>Second</td> 
    <td><input type='checkbox' /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
<tr>
    <td>Third</td> 
    <td><input type='checkbox' /></td>
    <td>Some INformation</td>
    <td>Testing</td>
</tr>
</table>

<强> CSS

 table
 {
 border-top:1px solid #000;
 border-right:1px solid #000;
 }
 table td
 {
border-bottom:1px solid #000;
 border-left:1px solid #000;
 }
 .green
{
  background-color:green;
 }

<强> JQUERY

 $('#MainTable input[type=checkbox]').on('click',function(){
    $(this).parent().toggleClass('green').siblings().toggleClass('green');
  });

Working JSFIDDLE Demo

Answer 3

在我看来，当您的回调结束时，您的网页会被重新加载。

如果找到this。他们说你应该使用preventDefault（）来禁止这种行为。希望它有所帮助

Answer 4

  

.strikeout .otherdivClass .thirdCssClass {       背景：蓝色; }