2

我正在使用Wordpress 的任何滑块来创建包含图像和视频的幻灯片，例如http://www.storybox.co.nz/2011/lynx/

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

有没有人有提示为每张包含 iframe 的幻灯片添加一个类到相应的缩略图图标？

不幸的是，幻灯片和缩略图不使用相同的类，所以我最初选择 iframe 父 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>
4

2 回答 2

1

假设您无法更改 HTML，请在编写 JS 函数时按元素顺序执行此操作，以根据显示的“内容”（li.控制板）。下面的例子：

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

有你的模式。

于 2013-01-08T23:56:30.133 回答
0

我发现这很有趣，我正在努力改进我的 jquery，所以我添加了一种可能精炼/略有不同的方法，即使对任何滑块进行最合理的更改，它也应该可靠地工作（另外，我大部分时间都是昨天写的，但忘记了发布它，如果它可能对任何人有帮助，不希望它浪费）：

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

工作jsfiddle

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

  • 主选择器首先定位.anythingWindow，然后缩小到包含正确 iframe 的未克隆列表项。如果页面上还有其他 iframe，就性能而言，这应该保持相当优化，但我怀疑无论哪种方式都不会引起注意。如果嵌套结构有轻微的变化，它应该继续工作，只要使用相同的基本元素和类（你可以将一个 iframe 嵌套在 div 中，这仍然可以工作，而依赖于 2 个父母的东西up 会中断）。
  • 使用.eq()正确的值可以避免必须进行字符串连接（不确定是否有任何真正的性能变化......任何收益都可能被索引中使用的选择类消除）
  • .eq()使用参数作为每个相对于选择类的索引（不是克隆的列表项）调用iframe确保如果有超过 2 个克隆它可以正常工作（加上它在语义上是正确的）。（解释一下，您的解决方案之所以有效，是因为.index()不带参数调用会返回相对于所有兄弟元素的位置，其中包括第一个克隆的元素li......如果在拥有之前li克隆了多个，它将​​中断，对于如果克隆不存在——也许这完全不是问题，永远不会发生，但我个人不喜欢依赖插件的明显 shim[?] 不会被更改或删除）。 liiframeli
  • 在我写它的时候，我假设你想将类附加到包含lis 的 s 上.anythingControl，然后使用a基于此的选择器访问 s ：显然两者都可以，只要合适就可以了。

    • 于 2013-01-09T18:27:01.600 回答