0

7つのオプションと各オプションの7つのボタンを備えたコンボボックスを持つhtmlファイルがあります。しかし、Chrome ブラウザでは動作しません。コードに問題があると思います。理由はわかりませんが、助けていただければ幸いです。

Jクエリ:

$(document).ready(function(){
$("#myButton1").hide();
$("#myButton2").hide();
$("#myButton3").hide();
$("#myButton4").hide();
$("#myButton5").hide();
$("#myButton6").hide();
$("#myButton7").hide();
    $("#opt1").click(function(){
        $("#myButton1").show();
        $("#myButton1").fadeIn(1000);
        $("#myButton1").click(function(){
            $("#myButton1").hide();            
        });
    });
    $("#opt2").click(function(){
        $("#myButton2").show();
        $("#myButton2").fadeIn(1000);
        $("#myButton2").click(function(){
            $("#myButton2").hide();            
        });
    });
    $("#opt3").click(function(){
        $("#myButton3").show();
        $("#myButton3").fadeIn(1000);
        $("#myButton3").click(function(){
            $("#myButton3").hide();            
        });
    });
    $("#opt4").click(function(){
        $("#myButton4").show();
        $("#myButton4").fadeIn(1000);
        $("#myButton4").click(function(){
            $("#myButton4").hide();            
        });
    });
    $("#opt5").click(function(){
        $("#myButton5").show();
        $("#myButton5").fadeIn(1000);
        $("#myButton5").click(function(){
            $("#myButton5").hide();            
        });
    });
    $("#opt6").click(function(){
        $("#myButton6").show();
        $("#myButton6").fadeIn(1000);
        $("#myButton6").click(function(){
            $("#myButton6").hide();            
        });
    });
    $("#opt7").click(function(){
        $("#myButton7").show();
        $("#myButton7").fadeIn(1000);
        $("#myButton7").click(function(){
            $("#myButton7").hide();            
        });
    });
});

HTML:

<select>
    <option id="opt1">One</option>
    <option id="opt2">Two</option>
    <option id="opt3">Three</option>
    <option id="opt4">Four</option>
    <option id="opt5">Five</option>
    <option id="opt6">Six</option>
    <option id="opt7">Seven</option>
</select>
<input type="button" value="Click 1" id="myButton1"/>
<input type="button" value="Click 2" id="myButton2"/>
<input type="button" value="Click 3" id="myButton3"/>
<input type="button" value="Click 4" id="myButton4"/>
<input type="button" value="Click 5" id="myButton5"/>
<input type="button" value="Click 6" id="myButton6"/>
<input type="button" value="Click 7" id="myButton7"/>

JSFiddle: http://jsfiddle.net/GqdS7/

4

4 に答える 4

0

これが更新された fiddleです。

<option>基本的に、コントロールをタグにリンクすることはできません。したがって、あなたの問題。

あなたのhtmlでは、IDを取り除いて値を取得する代わりに、値にアクセスする方がクリーンで迅速であるため、各オプションに値属性を追加しました。

于 2013-10-09T06:52:10.220 に答える