1

私はこのコードを持っていますが、ラジオボタンをクリックしても画像の 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

4 に答える 4

3

入力フィールドの .change イベントにバインドされた各関数のスコープで、スタイル、乳房、およびボタンを定義しています。これらの関数の外ではアクセスできません。それらを関数の外で宣言してから、入力変更関数内で設定します。

すなわち

$(document).ready(function() {
    var style, breast, buttons;
        $("input:radio[name=style]").change(function() {
            if (this.value == "tuxedo"){
于 2013-02-25T13:24:45.420 に答える
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();

于 2013-02-25T13:24:07.723 に答える
0

  1. 「準備完了」ハンドラーの先頭で変数を宣言します。 $(document).ready(function() { var style; var breast; var buttons; ...

  2. 条件ステートメント内で var を使用しないでください。値を設定するだけです： if (this.value == "tuxedo"){ style = 'tuxedo'; ....

  3. 「変更」ハンドラの最後で src 属性を変更するコードを呼び出します。3回呼び出す必要があります。

于 2013-02-25T13:28:25.803 に答える
0

これは完全な作業例です。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-25T13:34:21.967 に答える