由于我是jQuery的新手,我遇到了一些问题。我有两个产品图片的div,在它们下面我有几个“颜色选择器”让顾客看看可用的颜色。当用户悬停其中一个“链接”时,我有一个新的div显示其中的颜色。 Bla bla ...我遇到的问题是它总是从第一个“color_selector”中选择ID,即使我在第二个color_selector范围内悬停一个链接。
修改:我无法在文字中发布多个超链接,因此我已将所有<a>
代码更改为<hyperlink>
。
<div class="product_color" id="color_product01_content"></div>
<span class="color_selsector" id="color_product01">
<hyperlink href="javascript:void(0);" class="color_trigger" rel="000000">Product 01 color 01</hyperlink>
<hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef">Product 01 color 02</hyperlink>
</span>
<div class="product_color" id="color_product02_content"></div>
<span class="color_selsector" id="color_product02">
<hyperlink href="javascript:void(0);" class="color_trigger" rel="000000">Product 02 color 01</hyperlink>
<hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef">Product 02 color 02</hyperlink>
</span>
和jQuery:
$('a.color_trigger').mouseover(function(){
var contentPanelId = $(".color_selector").attr("id");
var valueColor = jQuery(this).attr("rel");
$("#" + contentPanelId + "_content").css({"background-color" : "#" + valueColor, "display" : "block"});
});
答案 0 :(得分:1)
答案 1 :(得分:0)
尝试替换
var contentPanelId = $(".color_selector").attr("id");
通过
var contentPanelId = $(this).parent().attr("id");
这应该有效!