如何创建多个按钮来更改内联快捷代码

Question

我在我的WordPress站点中创建了许多图片库，但我一次只想显示一个。我正在尝试创建一系列按钮/超链接，这些按钮/超链接将改变在页面(而不是弹出页面)中显示哪个图库。

我尝试了以下方法(每个<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类中