jQuery属性不会改变

时间:2010-10-24 16:18:36

标签: jquery

由于我是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"});
});

2 个答案:

答案 0 :(得分:1)

您需要获取包含.color_selector的{​​{1}},如下所示:

this

.closest method找到与选择器匹配的元素最近的父级。

答案 1 :(得分:0)

尝试替换

 var contentPanelId = $(".color_selector").attr("id");

通过

var contentPanelId = $(this).parent().attr("id");

这应该有效!