jQuery将CSS类添加到选定的单选按钮

Question

我正在尝试根据选择的单选按钮将CSS类添加到单选按钮。

 $("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]").val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass').change(); $(".tlt1").removeClass('topCssClass').change(); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass').change(); $(".tlt1").removeClass('centerCssClass').change(); } }); 

 .centerCssClass { background-color: blue; } .topCssClass { background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div> 

Answer 1

你有两个问题。 首先，您从中检索值的选择器是不正确的。 您应该使用this引用从单击的单选按钮获取值。

其次，您需要使CSS类更具体，以便它们覆盖.tlt1的原始background-color设置。 试试这个：

 var $tlt = $(".tlt1"); $("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); if (radVal == 'center') { $tlt.addClass('centerCssClass').removeClass('topCssClass'); } else if (radVal == 'top') { $tlt.addClass('topCssClass').removeClass('centerCssClass') } }); 

 .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } .tlt1.centerCssClass { background-color: blue; } .tlt1.topCssClass { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div> 

请注意，您也不需要在div元素上触发change()事件，因为它是冗余的。

Answer 2

因为tlt1的背景颜色无法覆盖

所以你必须在centerCssClass，topCssClass css之后添加!important

 $("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); var tlt1 = $("#tlt1"); if (radVal == 'center') { tlt1.addClass('centerCssClass').change(); tlt1.removeClass('topCssClass').change(); } else if (radVal == 'top') { tlt1.addClass('topCssClass').change(); tlt1.removeClass('centerCssClass').change(); } }); 

 .centerCssClass { background-color: blue !important; } .topCssClass { background-color: red !important; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div id='tlt1' class="tlt1"></div> 

Answer 3

您需要使用:checked selector来获取所选的单选按钮值，并稍微更改CSS类声明以覆盖background-color

 $("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]:checked").val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass').removeClass('topCssClass'); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass').removeClass('centerCssClass'); } }); 

 .tlt1.centerCssClass { background-color: blue; } .tlt1.topCssClass { background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1">tlt1</div> 

Answer 4

您的解决方案是正确的 ，只是在change事件更改内部var radVal = $("input[type=radio][name=align]").val(); to var radVal = $(this).val();

因为现在你获得的第一个元素的值是input其属性type='radio'和name='align' 。 因此，您案例中的第一个元素具有价值中心，因此它始终是中心。 通过使用$(this)您可以获得实际更改的元素。

此外，您不必在.tlt1元素上触发change()事件。

最后在你的css中，较低的值比较高的值更受尊重。 这就是为什么你的背景没有改变的原因。 因为类.tlt1背景比类centerCssClass更重要。

这是一个有效的例子

 $("input[type=radio][name=align]").on('change', function () { var radVal = $(this).val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass'); $(".tlt1").removeClass('topCssClass'); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass'); $(".tlt1").removeClass('centerCssClass'); } }); 

 .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } .centerCssClass { background-color: blue; } .topCssClass { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div> 

Answer 5

试试这个

使用id代替class tlt1

 $("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); if (radVal == "center") { $("#tlt1").removeClass('topCssClass').change(); $("#tlt1").addClass('centerCssClass').change(); $("#tlt1").removeClass('tlt1'); } else { $("#tlt1").removeClass('centerCssClass').change(); $("#tlt1").addClass('topCssClass').change(); $("#tlt1").removeClass('tlt1'); } }); 

 .centerCssClass { float: left; height: 300px; width: 300px; background-color: blue; } .topCssClass { float: left; height: 300px; width: 300px; background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1" id="tlt1"></div>