jquery - JQueryを使用してボタンでDIVを選択

Question

2つのDIVタグ、つまり、respond-1とrespond-2があります。これらのdivをボタンで選択したいと思います。reply1Buttonをクリックすると、respond-1 divが表示されます。同様に、repond2Buttonをクリックすると、respond-2divが表示されます。

デフォルトでは、ページにrespond-1divが表示されます。

Answer 1

以下のようなHTMLの場合、

<div id="container">
    <div id="respond-1" class="responses">Respond 1</div>
    <div id="respond-2" class="responses" style="display: none" >Respond 2</div>
</div>
<button id="respond1Button">Respond 1</button>
<button id="respond2Button">Respond 2</button>

以下は、対応するボタンのクリックに基づいて表示/非表示にするスクリプトです。

$(function() {
    var $respond1 = $('#respond-1');
    var $respond2 = $('#respond-2');
    var $responses = $('.responses');

    $('#respond1Button').click(function() {
        $responses.hide();
        $respond1.show();
    });

    $('#respond2Button').click(function() {
        $responses.hide();
        $respond2.show();
    });
});

デモ

Answer 2

このようなものをお探しですか？

<div id="respond-1">First Response<div>
<div id="respond-2" style="display:none;">Second Response<div>

<button type="button" onclick="$('#respond-1').show();$('#respond-2').hide():">repond1Button</button>

<button type="button" onclick="$('#respond-2').show();$('#respond-1').hide():">repond2Button</button>

Answer 3

イベントを使用して.click、クリックハンドラーをバインドできます。IDを持つ要素はを使用して選択される$('#id')ため、これら2つを組み合わせると、divを表示するボタンを簡単に作成できます。

<div id="respond-1"></div>
<button id="respond1Button">Show Respond 1</button>

// on DOM ready...
$(function() {
    // Select the divs
    var resp1 = $('#respond-1');

    // Hide them to start
    resp1.hide();

    // Bind click handlers
    $('#respond1Button').click(function() {
        resp1.show();
    });
});

Answer 4

同じID属性を持つ複数のitenを持つことはできず、DIVタグにはNAMEという名前の属性がないことに注意してください。

この場合、最良のオプションは、BUTTONとDIVのいずれかにクラス「respond-1」を定義することだと思います。クリックしたボタンのクラスに応じて、対応するDIVを表示します。（英語の間違いについては申し訳ありませんが、私の母国語ではありません）:)

$(document).ready(function(){

    $('button.respond-1, button.respond-2').click(function(){

        $('div.respond-1, div.respond-2').hide();
        $('div.' + $(this).attr('class')).show();

    });

});