0

selectbox div show hideについて質問があります...まず、これは私のソースです

HTML :

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<a href="#"><span>Go</span></a>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

JS :

$(function() {
    $('#colorselector').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

デモ: http://jsfiddle.net/FvMYz/1345/

赤を選択すると、赤の Div が表示されます...しかし、変更したい... Go ボタンを追加します。しかし、それを作るのは難しいです...誰かが私を助けることができますか?

4

2 に答える 2

1

これはあなたが念頭に置いていることですか？

 $(function() {
        $('a').click(function(){
            $('.colors').hide();
            $('#' + $('#colorselector').val()).show();
        });
    });

JSFIDDLE

于 2013-01-17T02:27:22.797 に答える
1

私の答えは上記とほぼ同じですが、.clickが廃止されたため、イベントをトリガーするhrefにクラスまたはIDを配置し、.on()メソッドも配置します。.click() は単純に関数を .on() まで実行するため、基本的には .on() から .click() を呼び出して、.on() を直接呼び出すことができます。.on() のもう 1 つの優れた点は、次のようにして、複数のイベント リスナー タイプを 1 つのセレクターに簡単にバインドできることです。

$(something).on('click, mouseover', function() { // whatever });

$(function() {

     $('a[href="#"]').on('click', function() {
          $('.colors').hide();
          $('#'+ $('#colorselector').val()).show();
     });
});
于 2013-01-17T05:58:42.200 に答える