所以我想要实现的是改变图像的类,我用以下代码完成了。
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
功能出现问题。
答案 0 :(得分:0)
更改标记:
<?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');
});
});
答案 1 :(得分:0)
您也可以使用.index()
$('.inner_right div').on('click', function () {
position = $(this).index() + 1;
$(".container_left > div").hide();
$(".container_left > div:nth-child(" + position + ")").toggle();
})