Question

我正在使用Anything Slider for Wordpress创建包含图片和视频的幻灯片，例如http://www.storybox.co.nz/2011/lynx/

我希望链接到视频幻灯片的缩略图图标使用不同的图标。我想这样做是为了说明一些幻灯片是视频而不是静止图像。

是否有人有提示将类添加到包含iframe的每张幻灯片的相应缩略图图标？

不幸的是，幻灯片和缩略图不使用相同的类，因此我最初的想法是选择iframe parent li然后相应的缩略图将无效。但也许使用面板编号有一些东西？

提前感谢您的帮助！

基本代码（请注意，第一张和最后一张幻灯片是克隆版）：

<div class="anythingSlider anythingSlider-default activeSlider">
<div class="anythingWindow">
  <ul class="anythingSlider anythingBase" id="slider-342">
    <li class="cloned panel vertical">
      <div><span>
        <iframe></iframe>
        </span></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical activePage">
      <div>
        <iframe></iframe>
      </div>
    </li>
    <li class="cloned panel vertical">
      <div><img></div>
    </li>
  </ul>
</div>
<div class="anythingControls">
  <ul class="thumbNav">
    <li class="tooltip first"><a href="#" class="panel1"><span>1</span></a></li>
    <li class="tooltip"><a href="#" class="panel2"><span>2</span></a></li>
    <li class="tooltip"><a href="#" class="panel3"><span>3</span></a></li>
    <li class="tooltip last"><a href="#" class="panel4 cur"><span>4</span></a></li>
  </ul>
</div>

Answer 1

假设您无法更改HTML，请在编写JS函数时按元素顺序执行此操作以突出显示小滑动指示器（anchors / parent li“a.panel1”），并根据该内容显示“内容” （li.panel）。下面的例子：

var nth = 1;
$("li.panel").eq(nth); //get the second graphic
$("a.panel" + (nth + 1)).eq(0); //get the second link a.panel2

有你的模式。

Answer 2

我发现这很有意思，我正在努力改进我的jquery，所以我添加了一个可能精致/稍微不同的方法，即使对Anything Slider进行最合理的更改也应该可靠地工作（加上我昨天写的很多）但忘记发布它并且不希望它浪费，如果它可能对任何人都有帮助）：

$('.anythingWindow li.panel:not(.cloned) iframe').each(function() {
  $('.anythingControls li.tooltip').eq($(this).index('.anythingWindow li.panel:not(.cloned)')).addClass('video');
});

Working jsfiddle

解释你在对sajawikio的回答的评论中给出的解决方案的差异：

主选择器首先定位.anythingWindow，然后缩小到包含正确iframe的未克隆列表项。如果页面上有其他iframe，这应该保持相当优化，但我怀疑它会以任何方式显而易见。如果嵌套结构有轻微的变化，它应该继续工作，只要使用相同的基本元素和类（你可以在div中嵌入一个iframe，这仍然可以工作，而依赖于2个父母的东西）会打破）。

使用具有正确值的.eq()来解决字符串连接问题（不确定是否有任何真正的性能变化......任何增益都可能被索引中使用的选择类所消除）

使用参数作为每个.eq()相对于选择类（不是克隆列表项）的索引来调用iframe，确保如果有超过2个克隆，则它可以工作正确（加上它的语义正确）。（解释一下，你的解决方案有效，因为调用.index()没有参数会返回相对于所有兄弟元素的位置，其中包括第一个克隆的li ...如果克隆的li多一个{{1}在具有li的{{1}}之前，它会中断，如果克隆的iframe不存在则相同 - 也许这是一个完全没有问题，永远不会发生，但我个人不喜欢依赖插件的明显垫片[？]永远不会被改变或删除）。

在我写这篇文章时，我假设您希望将该课程附加到li的{{1}}个li，然后只需访问.anythingControl s基于这样的选择器：显然要么是好的，要么是任何适合的事情。

根据幻灯片内容更改幻灯片缩略图图标

2 个答案: