通过单选按钮更改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

回答

相关问题