我想根据选中的单选按钮更改页面上元素的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元素的样式要简单得多。