更改'李'css样式基于单击的单选按钮

change 'li' css style based on radio button clicked

本文关键字：单击 单选按钮 css 样式 更改 于单击      更新时间：2023-09-26

我想根据选中的单选按钮更改页面上元素的css样式。我在页面上动态添加了元素，每个元素都有3个单选按钮，我希望当用户按下每个元素上的单选按钮1,2或3时，每个元素的样式都会改变。。。到目前为止，我可以更改页面上的所有元素样式，但我只喜欢更改特定的元素样式。。

我相信这是可能的，但我不知道如何做到这一点，可能是通过传递每个元素的ID？！请帮忙吗？！

这是我到目前为止的代码。。。

$(document).ready(function(){
    $('input[type="radio"]').click(function() {
        if ($(this).attr("value") == "H") {            
            $("#somestyle li").css("border", "black");
        }
        if ($(this).attr("value") == "M") {
            $("#somestyle li").css("border", "blue");
        }
        if ($(this).attr("value") == "L") {
            $("#somestyle li").css("border", "yellow");
        }
    });
});

这段代码改变了所有li元素的样式，但不是我单击的那个。如何只更改一种元素样式？！如有任何帮助，我们将不胜感激。感谢

您需要使用closest（或parent）方法来只获取相应的li元素。因此：

if (this.value == "H") {            
    $(this).closest("li").css("border", "black");
}

对于其他尺寸，以此类推。

但是，您也可以通过使用CSS类而不是内联样式来显著改进代码。因此代码将变为：

$('input[type="radio"]').click(function () {
    $(this).closest("li").addClass(this.value);
});

并提供这样的类：

li.H {
    border-color: black;
}

好处是显而易见的：用背景、颜色等来设计li元素的样式要简单得多。

演示：http://jsfiddle.net/2mu0tdzo/

相关文章：