javascript - jQuery 每个循环总是返回最后一个值

Question

我有 3 个单选按钮和一个段落。我要做的就是检查一个按钮，然后更改段落的颜色。

<p id="pColor">Este párrafo cambiará de color según el valor del radio seleccionado.</p>

<form name="formColor">
    <input type="radio" name="color" value="red" id="red"/>Rojo
    <input type="radio" name="color" value="green" id="green"/>Verde
    <input type="radio" name="color" value="blue" id="blue"/>Azul
</form>

这是我的 jQuery 代码:

$(document).ready(function(){
    $("input[name='color']").change(function(){
        cambiaColor()
    });
});

    var cambiaColor=function(){
        $("input").each(function(){
            $("#pColor").css("color",$(this).val());
        });

    }

无论我选中哪个按钮，文本总是变成蓝色

Answer 1

为什么要使用 .each 呢？使用 onClick 代替

$("input").on('click', function(){
    $("#pColor").css("color",$(this).val());
});

Demo

---

您只需要上面的代码，不需要其他... Demo ，也可以将 $(this).val() 替换为 this.value，如 ^{@Cerbrus 所指出的}

---

Note: I've just used input as a selector there which is too general, so make sure you make it specific by using $('input[name="color"][type="radio"]')

---

另外，利用标签，会增强用户体验，老按 radio 不太舒服……

Demo (单击文本，将选择单选按钮)