jquery - JQueryスライダーの作り方

Question

私が考えていることは次のとおりです。4 つの画像があり、そのうちの 1 つをクリックすると、必要な情報を含むパネルが表示されます。別の画像をクリックすると、古いパネルが消え、同じ場所に新しいパネルが開きます。私はこのようなことを試しました：

$(document).ready(function(){
  $("#img1").click(function(){
    $("#panel").show("slow");
  });
});

<div id="panel1">
<img src="images/image1">
Some text
</div>

<img id="img1" src="some image">
<img id="img2" src="some image">

...

しかし、この方法で 2 番目の画像をクリックすると、古いパネルは消えず、最初のパネルの下に新しいパネルが開きます。

Answer 1

これを使って ：

    $(document).ready(function(){
    $("#img1").click(function(){
    $(".image:visible").hide();
    $("#panel").show("slow");
  });
});

Answer 2

古いパネルを閉じるように命令しないのに、どうして古いパネルが閉じると期待できるでしょうか?

これが私がすることです（テストされていません）：

$(document).ready(function () {
  $('img').click(function () {
    var img = $(this);
    var panel = $('#panel');
    panel.hide();
    panel.html(img.data('info'));
    panel.show('slow');
  })
});

HTML部分：

<img src="img1.jpg" data-info="information for the image" />
<img src="img2.jpg" data-info="information for the image" />
<img src="img3.jpg" data-info="information for the image" />
<div id="panel"></div>

Answer 3

これを試して：

.panelevery にcss クラスを与えるpanel:

<div id="panel1" class='panel'>
<div id="panel2" class='panel'>
...........

hide the panelidとshow the corresponding panel: _

$("#img1").click(function(){
   $('.panel').slideUp();
   $("#panel1").show('slow');
});

$("#img2").click(function(){
   $('.panel').slideUp();
   $("#panel2").show('slow');
});