0

このマークアップをオンライン ストアのカテゴリ ページの製品に使用する...

Product A
<div id="lateral-thumbnails" class="product-col-left">
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/001.jpg" alt="" />
    </a>
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/002.jpg" alt="" />
    </a>
     ...
</div>

<div id="product-img-box" class="product-img-box">
    <a id="mainframeimage-AAA" href="AAA url">
        <img src="/images/AAA.jpg" alt="" />
    </a>
</div>

Product B
<div id="lateral-thumbnails" class="product-col-left">
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/901.jpg" alt="" />
    </a>
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/902.jpg" alt="" />
    </a>
     ...
</div>

<div id="product-img-box" class="product-img-box">
    <a id="mainframeimage-BBB" href="BBB url">
        <img src="/images/BBB.jpg" alt="" />
    </a>
</div>  

<script type="text/javascript">
    function showPic (thumbs) {
        if (document.getElementById) {

            jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeOut(250);

            setTimeout(function() {
                document.getElementById('mainframeimage<?php echo $_product->getId();?>').src = thumbs.href; 
                jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeIn(250);
            }, 250);

            return false; 

        } else {
            return true;
        }
    }
</script>

この JavaScript コードを使用すると、フェード効果のあるサム src を、処理された最後のメインフレーム イメージ ID に変更できます。

画像 001.jpg と 002.jpg が mainframeimage-AAA に配置され、画像 901.jpg と 902.jpg が mainframeimage-BBB に配置されることを JavaScript 言語でどのように言えますか?

よろしく

4

1 に答える 1

1

この jsFiddleを見てください。バインディングを少し簡略化しmouseover、さまざまな手順を詳しく説明するためにいくつかのコメントを追加しました

また、次の点にも注意してください。

  • ID は DOM 内で一意である必要があります。ID が重複しています ( product-img-box)
  • このテストを行う必要はありませんif (document.getElementById)
  • showPic関数で何かを返す必要はありません
  • このfadeout()関数はコールバック関数をサポートしています。つまり、フェードアウトが完了すると、コールバック関数が実行されるため、setTimeout()呼び出す前に待機する必要はありません。fadeIn()
于 2013-10-09T18:59:58.290 に答える