如何使用jQuery和單選按鈕切換兩個圖像？

這不太好，但我想你會得到我想要做的。如何使用jQuery和單選按鈕切換兩個圖像？

<label><input name="jpgSel" type="radio" value="0">jpg 1</label><br /> 
<label><input name="jpgSel" type="radio" value="1">jpg 2</label><br /> 
<div id="showjpg"></div>

和

$(document).ready(function() { 
    $("select").change(function() { 
      if ($("jpgSel:checked").val() == 1) { 
      $('#showjpg').attr({ 
       src: 'one.jpg', 
       alt: 'one dot jpg' 
     }); 
    } 
    else { 
      $('#showjpg').attr({ 
       src: 'two.jpg', 
       alt: 'two dot jpg' 
     }); 
    } 
});

來源

2010-06-08 trench

你有幾個問題：

的#showjpg元素是div，你應該有一個有元素img。
您正在使用的change事件綁定的選擇是不正確的（$("select")），它應該像$("input[name=jpgSel]")
如果您更改事件綁定兩個單選按鈕，你可以簡單地獲得所選擇的元素的值this.value。

試試這個：

$(document).ready(function() { 
    $("input[name=jpgSel]").change(function() { 
    if (this.value == "0") { 
     $('#showjpg').attr({ 
     src: 'one.jpg', 
     alt: 'one dot jpg' 
     }); 
    } else { 
     $('#showjpg').attr({ 
     src: 'two.jpg', 
     alt: 'two dot jpg' 
     }); 
    } 
    }); 
});

檢查爲例here。

來源

2010-06-08 04:39:18 CMS

謝謝！正是我在找什麼。並徹底解釋。真的，謝謝。 – trench 2010-06-08 04:48:39

if ($("jpgSel:checked").val() == 1) {

應該讀

if ($("#jpgSel:checked").val() == 1) {

或者是一個錯字？你

可能還需要對自己使用$('#jpgSel:checked')瓦特/出== 1

編輯

OH和$("input[@name='jpgSel']").click(function(){可能會更好。

來源

2010-06-08 04:31:52 griegs

你不不再需要'@'，也不需要單引號。所以'$（「input [name = jpgSel]」）...'應該這樣做。 – 2010-06-08 04:41:04

jpgSel是出了名，並已被選中這樣

$("[name='jpgSel']:checked")

但我認爲它會更容易放棄這和使用。點擊（）函數像這樣

$("[name='jpgSel'][value='0']").click(function{/*do something*/}); 
$("[name='jpgSel'][value='1']").click(function{/*do something else*/});

來源

2010-06-08 04:42:07

如何使用jQuery和單選按鈕切換兩個圖像？

回答

相關問題