Php eq不适用于某些导航项
我正在WP中开发一个页面,其中我在页面上有一组帖子,这些帖子被添加到幻灯片中,下面有一个隐藏的div,其中帖子库图像被隐藏,这些库被拆分为帖子,并像帖子幻灯片一样生成,只是这些容器是实际的帖子内容 当您单击幻灯片项目时,它会切换隐藏容器中相关项目的可见性,并在滑块上方显示该项目,然后您可以关闭该项目以清除div。目前,我将此按钮作为测试,您将在下面看到 以下标记是通过wordpress查询帖子生成的: 链接到javascript循环创建的帖子的按钮,该循环计算帖子的数量:Php eq不适用于某些导航项,php,javascript,jquery,ajax,wordpress,Php,Javascript,Jquery,Ajax,Wordpress,我正在WP中开发一个页面,其中我在页面上有一组帖子,这些帖子被添加到幻灯片中,下面有一个隐藏的div,其中帖子库图像被隐藏,这些库被拆分为帖子,并像帖子幻灯片一样生成,只是这些容器是实际的帖子内容 当您单击幻灯片项目时,它会切换隐藏容器中相关项目的可见性,并在滑块上方显示该项目,然后您可以关闭该项目以清除div。目前,我将此按钮作为测试,您将在下面看到 以下标记是通过wordpress查询帖子生成的: 链接到javascript循环创建的帖子的按钮,该循环计算帖子的数量: <button
<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,id相同=work-1,2,3…等等,如下所示:
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');
});
它可以工作,但它总是遗漏了最后一个项目,所以我可以让其中两个项目工作,但链接到按钮的其中一个项目将根本无法工作
有没有人知道为什么它不起作用,或者有没有更好的方法
谢谢,
在live click函数中标记,这是零索引,因此它实际上与您正在单击的内容的名称不匹配。你没有项目部分的全部标记,所以我不知道这是否是问题所在,但是你说 使用前缀work-链接顶部按钮到具有相同id=work-1、2、3…等的实际隐藏项目的id 这意味着它应该匹配:work-1按钮应该显示work-1项目,而不是您得到的work-0 因此,您可以在索引中添加1:
var thisIs = $(this).index() + 1;
或者,您可以在创建元素时附加click处理程序
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已在1.9中被删除,因此您可能希望升级并主动将使用它的任何其他处理程序更改为Cheers Patrick,这是一种享受,您知道为什么我会计算为已计算文章元素总数的数字吗。例如,我元素中的rel attr在每个div上都是3?@Mdunbavan我想我不明白你的问题。您可以使用标记/代码编辑您的帖子,或者发布新问题并链接到它吗?给我回电话,我一定会查清楚的。嗨,帕特里克,现在没事了。我对代码进行了修改,使其正常工作。它是“i”,出于某种原因,它需要从零开始,因为索引基本上每次都跳过一个元素。