Question

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

Answer 1

您需要获取包含.color_selector的{{1}}，如下所示：

this

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

Answer 2

尝试替换

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

通过

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

这应该有效！

jQuery属性不会改变

2 个答案: