1

我环顾四周，不幸的是，没有找到任何与我希望实现的目标完全匹配的东西。我有两件事正在发生。首先是我使用 Awkward Showcase 的图像/内容滑块。然后在每张幻灯片中，我需要构建一个 mousein/mouseout 效果，当用户将鼠标悬停在文本选项上时，它会交换和隐藏图像。我的 JS 看起来像这样：

$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();

$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){

    $(this).css('cursor', 'pointer');

    if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){

        $("#news-1").hide();
        $("#news-2").hide();
        $("#news-3").hide();
        $("#news-4").hide();
        $("#news-5").hide();
        $("#news-6").hide();

        $("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));

        var vid = $(this).attr('id').replace('newsitem', 'news');

        $("#" + vid).show();

    }

});

我的 html 看起来像这样：

<div id="showcase" class="showcase">

<div class="showcase-slide cs-1">
  <div class="showcase-content">
    <div class="cs-container">
      <div class="thumbs">
        <div id="news-1"><a href="/link"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></a></div>
        <div id="news-2" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></a></div>
        <div id="news-3" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></a></div>                 
      </div>

      <div class="cs-links">
        <h2>Link Title 1</h2>
        <ul>
          <li id="newsitem-1"><a href="#">Hover Change Image 1</a></li>
          <li id="newsitem-2"><a href="#">Hover Change Image 2</a></li>
          <li id="newsitem-3"><a href="#">Hover Change Image 3</a></li>
        </ul>
      </div>
    </div>         
  </div>
  <div class="showcase-thumbnail">
  <div class="showcase-thumbnail-caption">Caption Title</div>
  <div class="showcase-thumbnail-cover"></div>
  </div>
</div>

<div class="showcase-slide cs-2">
  <div class="showcase-content">
    <div class="cs-container">
      <div class="thumbs">
        <div id="news-4"><a href="/link"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></a></div>
        <div id="news-5" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></a></div>
        <div id="news-6" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></a></div>                 
      </div>

      <div class="cs-links">
        <h2>Link Title 2</h2>
        <ul>
          <li id="newsitem-4"><a href="#">Hover Change Image 1</a></li>
          <li id="newsitem-5"><a href="#">Hover Change Image 2</a></li>
          <li id="newsitem-6"><a href="#">Hover Change Image 3</a></li>
        </ul>
      </div>
    </div>         
  </div>
  <div class="showcase-thumbnail">
  <div class="showcase-thumbnail-caption">Restaurant TV</div>
  <div class="showcase-thumbnail-cover"></div>
  </div>
</div>

</div>

任何建议将不胜感激。需要注意的一点是，我编写的代码只能运行一次，一旦您使用滑动功能，除非您硬刷新，否则悬停效果就会中断。

编辑：问题是，我怎样才能使它更有效率。我有多个项目（图像和文本）。以及任何想法为什么一旦使用幻灯片功能就会中断？

我使用 ID 是因为它是文本和相关图像之间的一对一关系。

编辑 2：如果我交换我的 js 的顺序，函数就会中断。这是一个 JSFiddle，只要我保持这个顺序，在我使用滑块之前一切正常。

http://jsfiddle.net/mV3dJ/

4

1 回答 1

0

我之前还没有真正看到过这样的功能，但作为潜在破坏者的一件事对我来说很突出

var vid = $(this).attr('id').replace('newsitem', 'news');

如果您要替换侦听事件的 ID，则该事件只能在该元素上发生一次（因为下次它具有不同的名称，因此无法识别它。

理想情况下，您希望使用诸如 firebug 或 Chrome 开发人员工具之类的 Web 调试器，设置断点并通过单步执行代码找出无法正常工作的原因。

于 2013-09-15T18:07:28.187 回答