Question

所以我想要实现的是改变图像的类，我用以下代码完成了。

show_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="container_left">
    <div class="show_1"><img></div>
    <div class="show_2 show_hidden"><img></div>
    <div class="show_3 show_hidden"><img></div>
</div>
<div class="container_right">
    <div class="inner_right">
        <div class="button_1"></div>
        <div class="button_2"></div>
        <div class="button_3"></div>
    </div>
</div>
<?php } ?>

所以当前发生的是代码创建的项目，无论有多少帖子和图像都应该更改，但它会影响创建的每个帖子。这意味着当按下来自button_1的{{1}}时，它会更改帖子1-3的图像，而不是仅发布帖子1.

我对问题的语法有点超出我的深度，我相信这个问题是基于继承的，并且post_1函数会对其进行排序。但是，按钮嵌套在第二层中似乎存在问题（*它们需要在页面的单独部分中找到它们。）

我在问题中找到的最接近的解决方案可以在http://jsfiddle.net/PBbmf/1/

找到

然而，我认为因为按钮嵌套在另一层中会导致$this功能出现问题。

Answer 1

更改标记：

<?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 } ?>

在你的jQuery中：

$(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');
    });
});

JSFiddle Demo

Answer 2

您也可以使用.index()

Js Fiddle

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

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

2 个答案: