Question

在我的在线商店的类别页面中为产品添加此标记...

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代码我可以更改thumb src的淡入淡出效果处理的LAST mainframeimage ID。

我怎么能用javascript语言说图像001.jpg和002.jpg将放在mainframeimage-AAA中，图像901.jpg和902.jpg放在mainframeimage-BBB中？

此致

Answer 1

查看this jsFiddle。我简化了你的mouseover绑定并添加了一些注释来详细说明不同的步骤

另请注意：

ID必须在DOM中唯一，您有重复的ID（product-img-box）
您无需执行此测试if (document.getElementById)
您无需在showPic函数
fadeout()函数支持回调函数，也就是说当淡出完成时，将执行回调函数，因此在调用{{{{}}之前不需要使用setTimeout()等待1}}

jQuery MouseOver更改特定ID中的src

1 个答案: