javascript - 根据单击的单选按钮更改 'li' css 样式

Question

我想根据选中的单选按钮更改页面上元素的 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 元素的样式，但不是我点击的那个。如何只更改一种元素样式？!任何帮助，将不胜感激。谢谢

Answer 1

您需要使用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/