Question

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

<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所指出的}

注意：我刚刚使用input作为选择器，这太笼统了，所以请确保你使用$('input[name="color"][type="radio"]')
使其具体化

另外，利用label，会增强用户体验，总是按下收音机并不舒服......

Demo （点击文字并选择无线电）

Answer 2

应该是

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

演示：Fiddle

在你的情况下，你迭代所有的输入元素并在循环中调用.css(...)来设置循环中的值 - 所以只应用最后一个值

Answer 3

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

你应该试试

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

Answer 4

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

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

选中JSFiddle。

Answer 5

因为你正在使用循环并且它在内部改变所有三个但是在一切似乎结束之后你只能看到最后一个变化。

来吧它是一个循环。

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

}

分析，

每个循环，

第一次迭代：
pColor将具有红色

第二次迭代：
pColor将具有绿色

第3次迭代：
pColor将具有蓝色

由于计算任务发生在不到纳秒的时间内，您的眼睛无法针对所有3个变化进行自我调整，最终只能进行最终更改。

Answer 6

这是因为你的循环将简单地遍历所有输入字段，而不仅仅是所选输入字段。这将导致使用最后一个输入元素的值，在您的情况下，其值为“blue”。这就是为什么你总是以蓝色结束。

您应该使用选中的输入项的值。您可以按如下方式执行此操作：

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

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

6 个答案: