javascript - 在一页上使用多个图像/链接在文本悬停上隐藏和显示图像

Question

我环顾四周，不幸的是，没有找到任何与我希望实现的目标完全匹配的东西。我有两件事正在发生。首先是我正在使用 Awkward Showcase 的图像/内容 slider 。然后在每张幻灯片中，我需要构建一个 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，只要我保持这个顺序一切正常，直到我使用 slider 。

http://jsfiddle.net/mV3dJ/

Answer 1

我以前从未真正见过像这样完成的功能，但对我来说作为潜在破坏者的一件事是这个

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

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

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