1

私は周りを見回しましたが、残念ながら、私が達成したいと思っているものと完全に一致するものは見つかりませんでした. 2 つのことが進行中です。最初に、私が Awkward Showcase を使用している画像/コンテンツ スライダー。次に、各スライド内で、ユーザーがテキスト オプションにカーソルを合わせたときに画像を切り替えて非表示にするマウスイン/マウスアウト エフェクトを構築する必要があります。私の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>

どんな提案でも大歓迎です。注意すべきことの 1 つは、私が書いたコードは 1 回しか機能しないことです。スライド機能を使用すると、ハード リフレッシュしない限り、ホバー効果が壊れます。

編集：質問は、どうすればこれをより効率的にできるかです。複数のアイテム (画像とテキスト) があります。そして、スライド機能が作動するとこれが壊れる理由はありますか?

ID を使用したのは、それがテキストと関連する画像の間の 1 対 1 の関係だからです。

編集 2 : js の順序を入れ替えると、関数が壊れます。ここに JSFiddle がありますが、この順序を守っていれば、スライダーを操作するまですべてが機能します。

http://jsfiddle.net/mV3dJ/

4

1 に答える 1

0

私はこれまでにこのような機能を実際に見たことがありませんが、潜在的なブレーカーとして私に際立っていることの1つはこれです

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

イベントをリッスンする何かの ID を置き換える場合、イベントはその要素で 1 回しか発生しません (次回は別の名前を持つため、認識されないためです。

理想的には、firebug や Chrome 開発者ツールなどの Web デバッガーを使用して、ブレークポイントを設定し、コードをステップ実行して正しく動作しない理由を突き止めます。

于 2013-09-15T18:07:28.187 に答える