jquery - 別のdivがクリックされたときにdivを表示する方法

Question

賢い人々がここで私を助けてくれることを願っています。

まず、このフィドルを見てみましょう: jsfiddle.net/BvCVu/17/

ボタン1をクリックすると白い領域にテキストが表示され、ボタン2をクリックすると古いテキストが消えて新しいテキストが表示されるようにしたいと思います.

（button1がクリックされたときに表示されるテキストが、ページがロードされたときにデフォルトで表示されることも望んでいます。）

Answer 1

次のようにすべてが適切にレイアウトされるように、白い領域に別の div が必要になる可能性があります。

<div class="content-area" style="float:right"></div>

JavaScriptに関する限り、次のようになります。

$(".button1").click(function() {
   $(".content-area").html("This is my text.");
});

Answer 2

次のソリューションのために、DOM に小さな変更を加えました。

<div class='overdiv'>
    <a href='#'><div class='button button1'>button 1<span class="data">b1</span></div></a>
    <a href='#'><div class='button button2'>button 2<span class="data">b2</span></div></a>
    <a href='#'><div class='button button3'>button 3<span class="data">b3</span></div></a>
    <a href='#'><div class='button button4'>button 4<span class="data">b4</span></div></a>
    <div class="whitespace"></div>
</div>

これは私が信じているように機能します。.overdivすべてがクラスを使用しているため、このようなことをしたり、将来的に計画したりする場合、複数の がある場合にも機能します。

$(".overdiv").find(".button").click( function() {
    $this = $(this);
    $this.closest(".overdiv").children(".whitespace").text($this.text());
});
$('.button1').click();

フィドル

別のテキストを表示したい場合は、次のようにすることもできます (別のテキストを表示し.dataたい場合は、要素内にあるものを変更するだけです:

$(".overdiv").find(".button").click( function() {
    $this = $(this);
    $this.closest(".overdiv").children(".whitespace").text($this.find(".data").text());
});
$('.button1').click();

フィドル