Question

我环顾四周，不幸的是，没有找到任何与我希望达到的完全匹配的东西。我有两件事情在发生。首先是我正在使用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/

Answer 1

我之前没有真正看到这样的功能，但有一件事对我来说是一个潜在的破坏者就是这个

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

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

理想情况下，您希望使用像firebug或Chrome开发人员工具这样的网络调试器，设置断点并从代码中逐步找出它无法正常工作的原因。

图像隐藏＆amp;在文本悬停上显示在一页上使用多个图像/链接

1 个答案: