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

Question

我有三个单选按钮和一个解析器。我要做的是检查一个按钮，然后，改变段落的颜色。

<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

它应该是

$(document).ready(function () {
    $("input[name='color']").change(function () {
        $("#pColor").css("color", this.value);
    });
});

演示：小提琴

在您的示例中，您将遍历所有输入元素，并在循环中调用.css(...)，该循环设置循环中的值，因此将只应用最后一个值。

Answer 2

因为你正在遍历所有的单选按钮，所以它会一个一个地改变它的颜色，最后它会应用最后一个。

你应该试试

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

Answer 3

当然，因为你是循环所有的选项和每次你分配颜色-它总是以最后一个结束。您必须像这样修改JS代码：

$(document).ready(function () {
   $("input[name='color']").change(function () {
      $("#pColor").css("color", $("input[name='color']:checked").val());
   });
});

看看这个JSFiddle。