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元素进行样式设计要简单得多。

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

1 个答案:

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