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

【问题标题】：Changing slide thumbnail icon depending on slide content根据幻灯片内容更改幻灯片缩略图图标
【发布时间】：2013-01-10 02:27:01
【问题描述】：

我正在使用Anything Slider for 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>

【问题讨论】：

标签： jquery anythingslider

【解决方案1】：

假设您无法更改 HTML，请在编写 JS 函数时按元素顺序执行此操作，以突出显示基于“内容”的小幻灯片指示器（锚点/父 li“a.panel1”）（锂面板）。下面的例子：

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

这是你的模式。

【讨论】：

顺便说一句，如果您想获得非克隆的，只需将 $("li.panel").eq(nth) 替换为 $("li.panel").not('.cloned') .eq(nth)
谢谢！在您的帮助下完成了这项工作：$("iframe").parent().parent(".panel").not(".cloned").each(function() { var nth = $(this).index(); $("a.panel" + (nth)).eq(0).addClass("has-iframe"); });

【解决方案2】：

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

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

Working jsfiddle

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

主选择器首先以.anythingWindow 为目标，然后缩小到包含正确 iframe 的未克隆列表项。如果页面上还有其他 iframe，就性能而言，这应该保持相当优化，但我怀疑无论哪种方式都不会引起注意。如果嵌套结构有轻微的变化，它应该继续工作，只要使用相同的基本元素和类（你可以将一个 iframe 嵌套在 div 中，这仍然可以工作，而依赖于 2 个父母的东西up 会中断）。

使用具有正确值的.eq() 不必进行字符串连接（不确定是否有任何真正的性能变化......任何收益都可能被索引中使用的选择类抹去）

调用.eq() 并使用参数作为每个iframe 相对于选择类（不是克隆的列表项）的索引，确保如果有超过2 个克隆，它可以正常工作（加上它在语义上是正确的）。（解释一下，您的解决方案有效，因为在不带参数的情况下调用 .index() 返回相对于所有同级元素的位置，其中包括第一个克隆的 li...如果在 @987654330 之前有多个克隆的 li @ 拥有iframe，它会坏掉，如果没有克隆的li 也一样——也许这完全不是问题，永远不会发生，但我个人不喜欢依赖插件的明显的 shim[?] 不会被更改或移除）。

在我写它的时候，我假设你想将这个类附加到包含 lis 的 .anythingControl 上，然后使用基于此的选择器访问 as：显然要么很好，只是任何适合的问题。

【讨论】：