图像隐藏&使用一个页面上的多个图像/链接在文本Hover上显示

Question

我环顾四周，不幸的是，没有发现任何与我希望达到的目标完全相符的东西。我有两件事要做。首先是一个图像/内容滑块，我使用的是尴尬的展示。然后，在每一张幻灯片中，我需要构建一个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/

Answer 1

我从来没有见过像这样的功能，但有一件事在我看来是潜在的破坏者。

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

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

理想情况下，您希望使用像firebug或Chrome工具这样的web调试器，设置断点，并从代码中了解为什么它不能正常工作。