Php Jquery重复类扇区用于添加/删除多个项上的类

因此，我试图实现的是更改图像的类，这是我用以下代码完成的

show\u hidden

类使图像不可见，并且

width:0

和

height:0

每个按钮都会显示一个隐藏类并将其添加到图像元素中

$(".button_1").click(function() {
    $(".show_2, .show_3").addClass("show_hidden");
    $(".show_1").removeClass("show_hidden");
});

$(".button_2").click(function() {
    $(".show_1, .show_3").addClass("show_hidden");
    $(".show_2").removeClass("show_hidden");
});

$(".button_3").click(function() {
    $(".show_1, .show_2").addClass("show_hidden");
    $(".show_3").removeClass("show_hidden");
});

这会影响wordpress循环，该循环根据文章的数量创建项目的实例。（*我在下面的代码中省略了图像细节）

更改标记：

<?php  if (is_page)()({
foreach ($posts as post): 
setup_postdata($post);//setup variables inside the loop  
?>
<div class="tab-container">
  <div class="container_left">
      <div data-content="1" class="show_1"><img></div>
      <div data-content="2" class="show_2 show_hidden"><img></div>
      <div data-content="3" class="show_3 show_hidden"><img></div>
  </div>
  <div class="container_right">
      <div class="inner_right">
          <div data-tab="1" class="button_1"></div>
          <div data-tab="2" class="button_2"></div>
          <div data-tab="3" class="button_3"></div>
      </div>
  </div>
</div>
<?php } ?>

.
您也可以使用
.index（）


我认为你应该考虑在一个特定的职位上分配一个DIV。类似于，然后首先基于该类执行jquery选择，然后在该选择中执行jquery查找。类似于$（“.Post1”）。查找（“.show_2，.show_3”），然后应用属性。$这不是一个函数，而是一个变量；您的代码危险地混合了类和id的概念；你的小提琴与上面的代码无关。谢谢你，非常优雅。还让我学习了一些新的“数据特定标签”。所以，一个双坦克你。
<?php  if (is_page)()({
foreach ($posts as post): 
setup_postdata($post);//setup variables inside the loop  
?>
<div class="tab-container">
  <div class="container_left">
      <div data-content="1" class="show_1"><img></div>
      <div data-content="2" class="show_2 show_hidden"><img></div>
      <div data-content="3" class="show_3 show_hidden"><img></div>
  </div>
  <div class="container_right">
      <div class="inner_right">
          <div data-tab="1" class="button_1"></div>
          <div data-tab="2" class="button_2"></div>
          <div data-tab="3" class="button_3"></div>
      </div>
  </div>
</div>
<?php } ?>

$(function () { 
    $('[data-tab]').on('click', function () {
        var $tab = $(this);
        var id = $tab.attr('data-tab');
        var $container = $tab.closest('.tab-container');
        var $contents = $container.find('[data-content]');

        $contents.addClass('show_hidden')
            .filter('[data-content="' + id + '"]')
                .removeClass('show_hidden');
    });
});

$('.inner_right div').on('click', function () {
    position = $(this).index() + 1;
    $(".container_left > div").hide();
    $(".container_left > div:nth-child(" + position + ")").toggle();
})