jQuery图像src通过单选按钮更改

时间:2013-02-25 13:19:41

标签: javascript jquery html

我有这段代码,但为什么当我点击任何单选按钮时,图像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>

4 个答案:

答案 0 :(得分:3)

您在输入字段上绑定到.change事件的每个函数的范围内定义样式,乳房和按钮。它们不会在这些功能之外访问。在函数之外声明它们,然后将它们设置在输入更改函数中。

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

答案 1 :(得分:2)

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

声明这样..希望它对你有用..

你最好得到像这样的选中单选按钮的值

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

答案 2 :(得分:0)

  1. 在“ready”处理程序的开头声明变量: $(document).ready(function() { var style; var breast; var buttons; ...

  2. 不要在条件语句中使用var。只需设置值: if (this.value == "tuxedo"){ style = 'tuxedo'; ....

  3. 在“更改”处理程序的末尾调用更改src属性的代码。你必须打三次电话。

答案 3 :(得分:0)

这是一个完整的工作示例。 http://jsfiddle.net/whizkid747/FsSz6/  如果只想在选择所有3个部分时更改图像src,则可能需要在设置img src之前在每个变量中添加undefined检查

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