javascript - jQuery 显示/隐藏不起作用

Question

我在使用 jQuery 的 hide() 和 show() 函数时遇到了最奇怪的问题。

我正在处理的站点(开发版本)是 here

在该页面上，您会在特色产品下看到一个名为 Hydrate 的产品。该产品有一些 flavor 选项，所以我想做的是让它在用户单击“添加到购物车”按钮时显示一个默认隐藏的层。请在此处查看两个屏幕截图:

但是，当我单击“添加到购物车”按钮时，图层没有出现。下面的 Firebug 屏幕截图显示了在我单击“添加到购物车”按钮后元素的样子。

请注意，根据 jQuery 规范，元素样式是“display: block”，然后 应该 覆盖“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();