在一頁上使用多個圖像/鏈接在文本懸停時圖像隱藏和顯示

Question

我環顧四周，很遺憾，沒有找到與我希望達到的目標完全匹配的東西。 我發生了兩件事。 首先是我使用“尷尬展示櫃”的圖像/內容滑塊。 然后在每張幻燈片中，我需要構建一個mousein / mouseout效果，當用戶將鼠標懸停在text選項上時，該效果會交換並隱藏圖像。 我的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調試器，設置斷點，並逐步檢查代碼為什么無法正常工作。