>我正在 WP 中开发一个页面,其中我在页面上有一组帖子,这些帖子被添加到幻灯片中,在幻灯片下有一个隐藏的div,其中隐藏了帖子库图像,这些画廊被拆分为帖子并像帖子滑动显示一样生成,除了这些容器是实际的帖子内容。
当您单击幻灯片项目时,它会在隐藏容器中切换该相关项目的可见性并将其显示在滑块上方,然后您可以关闭它以清除div。 目前,我将在按钮上进行测试,如下所示。
下面通过wordpress查询帖子生成的标记:
链接到由 javascript 循环创建的帖子的按钮,计算帖子的数量:
<button class="toggles">work-1</button>
<button class="toggles">work-2</button>
<button class="toggles">work-3</button>
然后,它下面有一个名为 .project 的隐藏容器,当您单击项目时,该容器将变得可见:
下面是标记:
<article class="post royalSlider rsMinW"id="work-2 Exposure">
<img src="http://2mz:8888/wp-content/uploads/2013/02/interactive_table2.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">interactive_table</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build_03.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build_03</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build01.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build01</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_build02.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_build02</span>
<span class="rsABlock txtLeft col2" data-move-effect="none"></span>
</div>
<img src="http://2mz:8888/wp-content/uploads/2013/02/table_detail.jpg"alt="" />
<div class="rsContent">
<span class="rsABlock txtLeft col1" data-move-effect="none">table_detail</span>
<span class="rsABlock txtLeft col2" data-move-effect="none">
</span>
</div>
</article>
我遇到的问题是我有一些 javascript,它基本上将前缀为 #work- 的顶部按钮链接到具有相同 id="#work-1,2,3...etc" 的实际隐藏项目的 id,如下所示:
var projects = $('.project section article[id^="work-"]');
var num = projects.length;
//var nav = $('.projects section article')
console.log(num);
for (i=1; i<=num; i++) {
$('<button class="toggles" />').text('work-'+i).appendTo('#site-logo');
}
$('.toggles').live('click',
function(){
var thisIs = $(this).index();
$('.projects > .project section article[id^="work-"]').eq(thisIs).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
它可以工作,但它总是省略最后一个项目,所以我可以让其中的 2 个工作,但链接到按钮的一个项目根本不起作用。
有没有人知道为什么它不起作用或更好的方法?
谢谢马克
在您的实时点击函数中,thisIs
索引为零,因此它实际上与您点击的名称不匹配。您没有项目部分的完整标记,所以我无法判断这是否是问题所在,但是您说
将前缀为 #work- 的顶部按钮链接到具有相同 id="#work-1,2,3...etc" 的实际隐藏项目的 ID">
这意味着它应该匹配:work-1 按钮应该显示 work-1 项目,而不是你得到的工作-0。
因此,您可以在索引中添加 1:
var thisIs = $(this).index() + 1;
或者,您可以在创建元素时追加单击处理程序。
for (i=1; i<=num; i++) {
$('<button class="toggles"/>')
.text('work-'+i)
.attr('button-index', i)
.appendTo('#site-logo')
.bind('click', function() {
var buttonIndex = $(this).attr('button-index');
// prove the index is correct
console.log(buttonIndex );
// rest of the click handler code=
$('.projects > .project section article[id^="work-"]').eq(buttonIndex ).toggle();
$('.project').fadeIn(1000, 'easeInOutQuart');
});
}
这会将按钮标记呈现如下:
<button class="toggles" button-index="1">work-1</button>
<button class="toggles" button-index="2">work-2</button>
<button class="toggles" button-index="3">work-3</button>
我个人喜欢将我需要的数据设置为与它们相关的 dom 元素的属性,这样可以更轻松地查看正在发生的事情。从属性中提取数据在jQuery中不太可能改变,而如果你移动到调用它的位置或调整查询,你可能会用.index()
函数搬起石头砸自己的脚。
最后,请注意,.live
在 jQuery 1.7 中已弃用,在 1.9 中被删除,因此您可能希望升级并主动更改使用它的任何其他处理程序以.on