jQuery显示/隐藏不起作用

Question

我遇到了jQuery hide()和show()函数最奇怪的问题.

我正在开发的网站(开发版)就在这里

在页面上,您将看到名为Hydrate的特色产品下的产品.这个产品有一些风味选项,所以我想要做的就是当用户点击Add to Cart按钮时它会显示一个默认隐藏的图层.请看这里的两个屏幕截图:

但是,当我单击"添加到购物车"按钮时,该图层不会出现.下面的Firebug屏幕截图显示了点击"添加到购物车"按钮后元素的外观.

请注意,元素样式是"display:block",符合jQuery规范,然后应该覆盖"display:none"的CSS元素样式.我已经完成了数百次,如果不是更多,这是第一次没有用.现在看下面的Firebug截图.如果我在调试控制台中单击display:none旁边的红色斜线圈,则该图层将完全按照应有的方式显示.

以下是我认为相关代码的片段,但我看不出问题出在哪里.

CSS代码:

.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
    position:absolute;
    bottom:0px;
    left:0px;
    width:211px;
    background: url('../images/black_background_75.png');
    z-index:99999;
    padding: 6px;
    height:170px;
    display:none;
}

JS代码:

$(document).ready(function(){
    $.noConflict();
    jQuery('.add_to_cart_btn').live('click',function(e){
        e.preventDefault();
        $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
    });
    jQuery('.choose_options').live('click',function(e){
        e.preventDefault();
        jQuery('#options_'+jQuery(this).attr('rel')).show();
    });
});

注意:我想也许有某些东西干扰了所以我实现了noConflict,但它没有任何区别.另请注意,我在Firebug中没有收到任何JS错误.

HTML代码:

<article class="carouselProduct"> 
    <!--productContent starts here-->
    <article class="productContent">
        <a href="/shop/product/intensity-hydrate"><img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;"></a>
        <hgroup>
            <h4>Hydrate</h4>
           <h3>$25.00</h3>
            <h3 class="orange">$15.00</h3>
        </hgroup>
        <strong>Key Benefits:</strong>
        <ul>
            <li>Proper electrolyte balance</li>
            <li>Reduce muscle fatigue & cramping</li>
        </ul>
        </article>
        <!--productContent ends here--> 
        <!--productOptions layer starts here -->
        <div class="productOptions" id="options_1">
            <div class='selectbox1'>
                <label>Flavor</label>
                <select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
                    <option value='Fruit Punch'>Fruit Punch</option>
                    <option value='Orange'>Orange</option>
                </select>
            </div><br>
            <article class="product_btn">
                <a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
                <a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
            </article>
        </div>
        <!--productOptions layer ends here -->
        <!--product_btn starts here-->
        <article class="product_btn">
            <a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
            <a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
        </article>
    <!--product_btn ends here--> 
</article>

请注意,有两个添加到购物车按钮.只有代码中的最后一个(最初显示的那个)上面有"choose_options"类.此外,在叠加层内的取消按钮上,我调用了一个名为close_layer的函数,该函数传入了id,然后运行jQuery hide()函数,该函数也不起作用.

我已经尝试了所有我能想到的东西.我已禁用其他JS和CSS,但它仍然无法正常工作.我控制台记录了所有内容并添加了警报.它正在运行该函数,因为它将元素显示样式添加到隐藏的div,但有些东西不允许它覆盖CSS文件.

任何帮助将不胜感激.

Answer 1

在您的页面上,有多个div具有相同的ID - 'options_1'.因此,您的代码只会更改其中一个.如果你想显示所有这些,那么你可以这样做:

jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();