通過單選按鈕更改jQuery圖像src

我有這段代碼，但爲什麼當我點擊任何單選按鈕時，圖像src不會改變？通過單選按鈕更改jQuery圖像src

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Toggle Images using RadioButtons</title>
 <script type="text/javascript"
 src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
 </script>
 <script type="text/javascript">
  $(document).ready(function() {
   $("input:radio[name=style]").change(function() {
    if (this.value == "tuxedo"){
      var style = 'tuxedo';
    } else {
      var style = 'classic' ;     
    }
   });
   $("input:radio[name=breast]").change(function() {
    if (this.value == "double"){
      var breast = 'double';
    } else {
      var breast = 'single' ;     
    }
   });
   $("input:radio[name=buttons]").change(function() {
   if (this.value == "4"){
      var buttons = '4';
   } else if (this.value == "3"){
      var buttons = '3';
   } else if (this.value == "2"){
      var buttons = '2';
    } else {
      var buttons = '1' ;     
    }
   });
  
       $("#imgDef").attr(
      'src', 'http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'     
     );
  });
 </script>
</head>
<body>
Style:<br />
<label><input name="style" type="radio" value="classic" />Classic</label><br />
<label><input name="style" type="radio" value="tuxedo" />Tuxedo</label><br />
<br /><br />
Breast:<br />
<label><input name="breast" type="radio" value="single" />Single</label><br />
<label><input name="breast" type="radio" value="double" />Double</label><br />
Buttons:<br />
<label><input name="buttons" type="radio" value="1" />1</label><br />
<label><input name="buttons" type="radio" value="2" />2</label><br />
<label><input name="buttons" type="radio" value="3" />3</label><br />
<label><input name="buttons" type="radio" value="4" />4</label><br />
<img id="imgDef" src="http://127.0.0.1/2/suits/classic/single/1.jpg"/>
</body>
</html>

來源

2013-02-25 TzoLy

'style'，'buttons'之前增加一個檢查未定義的，和'breast'在更新'src'屬性時都超出了範圍。聲明它們在'$（「＃imgDef」）。attr（）'的範圍內，它應該可以工作。 – jrummell 2013-02-25 13:25:33

這是一個完整的工作示例。 http://jsfiddle.net/whizkid747/FsSz6/ 如果要在選擇了所有3個部分來改變圖像的src只，你可能需要在每個變量設定IMG SRC

var style,breast,buttons; 

$("input:radio[name=style]").change(function() { 

       if (this.value == "tuxedo"){ 
         style = 'tuxedo'; 
       } else { 
         style = 'classic' ;     
       } 
    loadImage(); 
      }); 
      $("input:radio[name=breast]").change(function() { 
       if (this.value == "double"){ 
         breast = 'double'; 
       } else { 
         breast = 'single' ;     
       } 
       loadImage(); 
      }); 
      $("input:radio[name=buttons]").change(function() { 
      if (this.value == "4"){ 
         buttons = '4'; 
      } else if (this.value == "3"){ 
         buttons = '3'; 
      } else if (this.value == "2"){ 
         buttons = '2'; 
       } else { 
         buttons = '1' ;     
       } 
       loadImage(); 
      }); 
function loadImage(){ 
    alert('http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'); 
          $("#imgDef").attr(
         'src', 'http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'     
        ); 
}

來源

2013-02-25 13:34:21 Whizkid747

謝謝！這工作很好！ – TzoLy 2013-02-25 15:14:17

$("input:radio[name=buttons]").change(function() { 
       var buttons; 

       if (this.value == "4"){ 
          buttons = '4'; 
       } else if (this.value == "3"){ 
          buttons = '3'; 
       } else if (this.value == "2"){ 
          buttons = '2'; 
        } else { 
          buttons = '1' ;     
        } 
       });

聲明像this..hope它爲你..

你更好地得到檢查單選按鈕的值，這樣

$('input:radio[name=buttons]:checked').val();

來源

2013-02-25 13:24:07 sasi

你'定義樣式，乳房和按鈕在每個函數的範圍內綁定到您的輸入字段上的.change事件。除了這些功能之外，他們將無法訪問。在函數之外聲明它們，然後將它們設置在輸入更改函數中。

即

$(document).ready(function() { 
    var style, breast, buttons; 
     $("input:radio[name=style]").change(function() { 
      if (this.value == "tuxedo"){

來源

2013-02-25 13:24:45 lparry

仍然無法工作:( – TzoLy 2013-02-25 14:27:31

在你的「準備」處理程序的開頭聲明變量： $(document).ready(function() { var style; var breast; var buttons; ...
不要使用VAR條件語句內。只需設定值： if (this.value == "tuxedo"){ style = 'tuxedo'; ....
調用哪個在你的「改變」處理程序結束改變src屬性的代碼。你必須給它打電話三次。

來源

2013-02-25 13:28:25

通過單選按鈕更改jQuery圖像src

回答

相關問題