Javascript jQuery 显示/隐藏不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14329655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show/hide not working
提问by Andrew Christensen
I'm having the strangest problem with jQuery's hide()and show()functions.
我在 jQueryhide()和show()函数方面遇到了最奇怪的问题。
The site I'm working on (development build) is here
我正在处理的站点（开发版本）在这里
On the page, you'll see a product under Featured Products called Hydrate. This product has some flavor options so what I want to do is make it so that when the user clicks the Add to Cart button it shows a layer that is by default hidden. See the two screen shots here:
在页面上，您将在“特色产品”下看到名为“水合物”的产品。这个产品有一些风味选项，所以我想要做的是当用户点击添加到购物车按钮时，它会显示一个默认隐藏的层。在此处查看两个屏幕截图：
However, when I click the Add To Cart button, the layer does not appear. The Firebug screenshot below shows what the elements look like after I've clicked the Add To Cart button.
但是，当我单击“添加到购物车”按钮时，该图层不会出现。下面的 Firebug 屏幕截图显示了我单击“添加到购物车”按钮后元素的外观。
Notice that the element style is "display: block" as per the jQuery norm, which then shouldoverride the CSS element style for "display: none". I've done this hundreds of times, if not more and this is the first time it hasn't worked. Now look at the Firebug screenshot below. If I click the red slash-circle next to display:none in the debug console, the layer appears exactly as it should.
请注意，元素样式按照 jQuery 规范是“display:block”，然后应该覆盖“display:none”的 CSS 元素样式。我已经这样做了数百次，如果不是更多的话，这是第一次它不起作用。现在看看下面的 Firebug 屏幕截图。如果我在调试控制台中单击 display:none 旁边的红色斜线圆圈，则该图层将完全显示应有的效果。
Below are the snippets of what I believe are relevant code, but I can't see where the problem is.
以下是我认为相关代码的片段，但我看不出问题出在哪里。
CSS Code:
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 Code:
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();
});
});
Note: I thought maybe there was some way that something was interfering so I implemented noConflict but it didn't make any difference. Also note that I'm not getting ANY JS errors in Firebug.
注意：我认为可能有某种方式干扰了所以我实现了 noConflict 但它没有任何区别。另请注意，我在 Firebug 中没有收到任何 JS 错误。
HTML Code:
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>.00</h3>
<h3 class="orange">.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>
Note that there are two Add To Cart buttons. Only the last one in the code here (the one that shows up initially) has the "choose_options" class on it. Also, on the Cancel button inside the overlay, I have call to a function called close_layer that passes the id in and then runs the jQuery hide() function which also doesn't work.
请注意，有两个“添加到购物车”按钮。此处代码中只有最后一个（最初显示的那个）具有“choose_options”类。此外，在叠加层内的取消按钮上，我调用了一个名为 close_layer 的函数，该函数将 id 传入，然后运行 jQuery hide() 函数，该函数也不起作用。
I've tried everything I can think of. I've disabled other JS and CSS and still it doesn't work. I've console logged everything and added alerts. It IS running the function because it adds the element display style to the hidden div but something isn't letting it override the CSS file.
我已经尝试了所有我能想到的。我已经禁用了其他 JS 和 CSS，但它仍然不起作用。我已经控制台记录了所有内容并添加了警报。它正在运行该函数，因为它将元素显示样式添加到隐藏的 div 中，但有些东西并没有让它覆盖 CSS 文件。
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by AnthonyY
On your page, there are more than one divs has the same ID - 'options_1'. So your code only change one of them. If you do want to show all of them, then you can do it as below:
在您的页面上，有多个 div 具有相同的 ID - 'options_1'。所以你的代码只改变其中之一。如果您确实想显示所有这些，那么您可以按如下方式进行：
jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();
回答by Sushanth --
The issue i feel is being cause by specificity
我觉得问题是由特异性引起的
element.stylehas higher specificity compared to .productoptionsbecause the property is part of the style attribute
element.style与.productoptions因为属性是样式属性的一部分相比具有更高的特异性
Even if you apply the classto the element element.stylewill be given preference..
即使你apply the class对元素 element.style也会优先考虑。.
The better option for you is to Remove the style attribute from your HTML..
对你来说更好的选择是 Remove the style attribute from your HTML..
Add the display:blockinside a class..
添加display:block内部类..
.block
{
display : block;
}
<div id="options_1" style="display:block">
should now look like
现在应该看起来像
<div id="options_1" class="block">
Now use .addClass()and .removeClass()to specify your logic.
现在使用.addClass()和.removeClass()来指定您的逻辑。
回答by Malk
It seems your DOM is messed up. Perhaps you have a missing tag somewhere or something?
看来你的 DOM 搞砸了。也许您在某处或某处缺少标签？
Anyway I visited your page and when I change:
无论如何，我访问了您的页面，当我更改时：
jQuery('#options_'+jQuery(this).attr('rel')).show();
jQuery('#options_'+jQuery(this).attr('rel')).show();
to
到
jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())
jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())
everything is fine.
一切安好。
回答by johnmanoahs
I had a similar problem and after debugging found that I had forced 'display: inline-block !important' in one of the places which was overriding my hide(). Could you check if the !important is used anywhere in the CSS that can be related?
我遇到了类似的问题，调试后发现我在覆盖我的 hide() 的地方之一强制执行了“display: inline-block !important”。你能检查一下 !important 是否在 CSS 中可以相关的任何地方使用吗？
