Question

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

我正在开发的网站（开发版）是here

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

enter image description here

但是，当我单击“添加到购物车”按钮时，该图层不会出现。下面的Firebug屏幕截图显示了点击“添加到购物车”按钮后元素的外观。 enter image description here

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

下面是我认为相关代码的片段，但我看不出问题出在哪里。

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();

Answer 2

我觉得这个问题是由特异性

造成的与element.style相比，

.productoptions具有更高的特异性，因为属性是样式属性的一部分

即使apply the class元素element.style 优先。。

更好的选择是Remove the style attribute from your HTML..

在课程中添加display:block ..

.block
{
    display : block;
}

<div id="options_1" style="display:block">

现在应该看起来像

<div id="options_1" class="block">

现在使用.addClass()和.removeClass()来指定您的逻辑。

Answer 3

看来你的DOM搞砸了。也许你在某处或其他什么地方缺少标签？

无论如何，我访问了你的页面，当我改变时：

jQuery('#options_'+jQuery(this).attr('rel')).show();

到

jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())

一切都很好。

Answer 4

我有一个类似的问题，经过调试后发现我在其中一个覆盖我的hide（）的地方强制'display：inline-block！important'。你能否检查一下可以在CSS中的任何地方使用！important？

jQuery显示/隐藏不起作用

4 个答案: