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

标签 javascript jquery html

我有这段代码,但为什么当我点击任何单选按钮时图像 src 没有改变?

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

最佳答案

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

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

关于javascript - jQuery 图像 src 通过单选按钮更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15067947/

相关文章:

javascript - jqGrid格式化程序修改原始数据?

javascript - 在类似的 div 上不显示

javascript - 仅刷新/重新加载网页一次

html - 使 MediaElement 与 HTML5 视频相同

javascript - 如何打印我的单选按钮并在文本区域中输入类型文本?

javascript - jQuery:对相似项目进行分组

javascript - 在您的生产 JavaScript 代码中保留 "console.log()"调用是个坏主意吗?

jquery - 使用 jQuery 在滚动时在 div 之间切换

css - block 元素被下推到下一行

Java HTMLUnit - 如何访问提交表单后发送到的页面 DOM