jQuery每個循環總是返回最後一個值

我有3個單選按鈕和一個parragraph。我必須做的是檢查一個按鈕，然後改變段落的顏色。jQuery每個循環總是返回最後一個值

<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()); 
     }); 

    }

文本總是變成藍色，不管是什麼按鈕，我檢查

來源

2014-01-31 Doruko

可能重複[我怎樣才能獲得通過jQuery選擇哪個電臺？]（http://stackoverflow.com/questions/596351/how-can-i-get- which-radio-is-selected-via-jquery） – Cerbrus

爲什麼你使用.each？使用onClick代替

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

Demo

所有你需要的是上面的代碼，沒有別的...Demo，也可以通過^@Cerbrus

注指出取代$(this).val()到this.value：我剛剛用input的選擇有其太一般了，所以一定要使之具體由使用$('input[name="color"][type="radio"]')

此外，利用label，將增強用戶體驗，這是不舒服按總是收音機...

Demo（點擊文字和無線電設備將被選中）

來源

2014-01-31 08:00:36

不要打擾檢查哪一個是'checked'，只處理單選按鈕上的點擊事件？我喜歡你的風格：D漂亮而簡單。 – Cerbrus

@Cerbrus我認爲這是讚美，而不是諷刺呀？：D –

它的用意是恭維。 – Cerbrus

當然，因爲你是循環的所有選項，每次你指定顏色 - 它將始終以最後一個結束。你必須像這樣修改你的JS代碼：

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

檢查這個JSFiddle。

來源

2014-01-31 08:00:07

只要使用'$（this）.val（）'，它就會返回相同的DOM元素。或者更好的是，'this.value' – Cerbrus

應該

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

演示：Fiddle

你的情況，你遍歷所有的投入要素，並呼籲在循環中 .css(...)其設置在循環值

- 所以纔有了上一個值將應用

來源

2014-01-31 08:00:13

因爲您正在使用循環，並且它在所有三個內部都會發生變化，但在一切似乎結束之後您只能看到最後一個變化。

來吧，它是在一個循環。

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

}

分析，

每個循環，

第一次迭代：
令pColor將有紅色

第二次迭代：
令pColor將具有色綠

第三次迭代：
令pColor將有藍色

由於計算任務，在不到納米發生第二你的眼睛是無法調整自己，所有的三個變化，最後只有解決了最終改變。

來源

2014-01-31 08:00:21

那是因爲你的循環會簡單地遍歷所有的輸入字段，而不僅僅是選定的字段。這將導致最後一個輸入元素的值被使用，在你的情況下，它的值是「blue」。這就是爲什麼你總是以藍色結束。

您應該使用選中的輸入項目的值。你可以這樣做如下：

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

來源

2014-01-31 08:00:44

，因爲你通過所有單選按鈕迭代，所以它會通過一個改變其顏色之一，並最終它將應用最後一個。

你應該嘗試的

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

來源

2014-01-31 08:10:32 Raj

jQuery每個循環總是返回最後一個值

回答

相關問題