1

我正在 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 ...等的实际隐藏项目的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 个工作，但是链接到按钮的项目之一根本无法工作。

有没有人知道为什么它不起作用或更好的方法来做到这一点？

谢谢，马克

4

1 回答 1

0

在您的实时点击功能内部，thisIs索引为零，因此它实际上与您点击的名称不匹配。你的项目部分没有完整的标记，所以我不知道这是否是问题所在，但你说

将带有 #work- 前缀的顶部按钮链接到具有相同 id="#work-1,2,3...etc" 的实际隐藏项目的 id

这意味着它应该匹配：work-1 按钮应该显示 work-1 项目，而不是你得到的 work-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()如果您从调用它的位置移动或调整查询，您可能会用该函数击中自己的脚。

最后，请注意在 jQuery 1.7 中.live已弃用并在 1.9 中删除，因此您可能希望升级并主动更改使用它的任何其他处理程序以.on

于 2013-02-14T18:47:42.253 回答