jqueryを使用してボタンをクリックすると3つのdivを表示する

debugcn 投稿 Dev

アンナ・カリン・セーダーバーグ

私は7つの名前を持っていますが、名前をクリックしたときに3つのプレゼンテーションのみを表示し、選択した名前を中央に表示したいと思います。現在のように、すべてのdivが最初に読み込まれ、次に非表示になります。

名をクリックすると、3つのdivが表示されます。しかし、ボタン4をクリックしてから名に戻ると、2つのdivしか表示されていません。

私はこれまで他の名前のコーディングを行っていませんが、名/ボタンを機能させることができれば、残りを理解できると思いました。

これはワードプレスサイトで、Diviを使用してページを作成しています。

私はこのページにいます：http：//demo.konstuppsala.online/est/

これまでの私のコード：

jQuery(document).ready(function() {
    // Hide the div 1
    jQuery('#reveal1').hide();
    
    jQuery('.rv_button1').click(function(e) {
        e.preventDefault();
        jQuery("#reveal1").slideToggle();
        jQuery('.rv_button1').toggleClass('opened closed');
        
        e.preventDefault();
        jQuery("#reveal2").slideToggle();
        jQuery('.rv_button2').toggleClass('opened closed');
        
        e.preventDefault();
        jQuery("#reveal6").slideToggle();
        jQuery('.rv_button6').toggleClass('opened closed');
        
        jQuery("#reveal1").animate({left: '500px'});
        jQuery('#reveal2').show();
        jQuery("#reveal2").animate({left: '50px'});
        jQuery('#reveal3').hide();
        jQuery('#reveal4').hide();
        jQuery('#reveal5').hide();
        jQuery('#reveal6').show();
        jQuery("#reveal6").animate({right: '50px'});    
    });
});

the HTML:
<div id="reveal1">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/dölja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div> 

<div id="reveal2">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/dölja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div> 

<div id="reveal3">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/dölja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div>

これは役に立ちますか？問題は、チュートリアルに従ったため、表示する純粋なモックアップがないことです。

ルアル

ここでは、簡単にするために、より単純なマークアップを使用して目的の動作を再現しました。JSスニペットは次のとおりです。

const reset = () => {
  $(".options").children().hide();
};

const showSelected = e => {
  const n = Number(e.target.getAttribute("data-n")) + 1;
  $(`.option:nth-child(${n - 1})`).show();
  $(`.option:nth-child(${n})`).show();
  $(`.option:nth-child(${n + 1})`).show();
};

const showOption = e => {
  reset();
  showSelected(e);
};

const main = () => {
  $(".button").click(e => showOption(e));
};

$(document).ready(main());

次のことに注意してください。

JSを使用して最初の要素を非表示にする代わりdisplay: none;に、ボックスに割り当てたクラスに適用するだけで済みます。
特定のボタンによってトリガーされるクリックイベントをリッスンする代わりに、ヘッダー内の任意のボタンからのクリックイベントをリッスンし、イベントターゲットとカスタムdata-n属性を使用して、実際に選択されているボックスを判別できます。
両端にボックスを追加して少しだましました。別のアプローチは、ボックスを動的に再編成することです。