複数のボタンを作成してショートコードを変更する方法

Question

ワードプレスサイトに多数のフォトギャラリーが作成されていますが、一度に1つだけ表示したいだけです。私は一連のボタン/ハイパーリンクを作成しようとしていますが、これはギャラリーがページ（ポップアップページではない）に表示されるように変更します。

私は以下を試しました（それぞれ<li>は別の試みです）が、何も私のために働いていません。誰も助けることができますか？

<ul> 
    <li><a onClick="document.getElementById('showMe').innerHTML = '[foogallery id=123]'">Gallery 1</a></li> 
    <li><a onClick="document.getElementById('showMe').innerHTML = '<?php echo do_shortcode(\'[foogallery id=234]\'); ?>'">Gallery 2</a></li> 
    <li><a href="<?php echo do_shortcode('[foogallery id=345]'); ?>" target="showMe" >Gallery 3</a></li> 
</ul> 
<div id="showMe"></div> 

Answer 1

私が正しくあなたを理解している場合、このコード

HTML

<div class="gallery-change-btn"> 
    <button class="btn" data-gallery-id="id-yougallery">Gallery #1</button> 
    <button class="btn" data-gallery-id="id-yougallery">Gallery #2</button> 
    <button class="btn" data-gallery-id="id-yougallery">Gallery #3</button> 
</div> 

HTMLギャラリー

<div class="wrapper-gallery"> 
    <div id="foogallery-gallery-1" class="gallery">qwe1</div> 
    <div id="foogallery-gallery-2" class="gallery">qwe2</div> 
    <div id="foogallery-gallery-3" class="gallery">qwe3</div> 
</div> 

JS

<script> 
    jQuery('.gallery-change-btn').on('click', 'button' , function(){ 
    var element = jQuery(this).data('gallery-id'); 
    jQuery('.wrapper-gallery .gallery').each(function (key, value) { 
     if (jQuery(value).attr('id') === ('foogallery-gallery-'+element)) { 
     jQuery(value).show(); 
     return; 
     }else{ 
     jQuery(value).hide(); 
     } 
    }); 
    }); 
</script> 

を試してみてください

ギャラリーをラップする必要がありますwrapper-galleryクラス