У меня самая странная проблема с функциями jQuery hide()
и show()
.
Сайт, над которым я работаю (разработка), здесь
На странице вы увидите продукт под Featured Products под названием Hydrate. У этого продукта есть некоторые варианты вкуса, поэтому я хочу сделать так, чтобы, когда пользователь нажимает кнопку "Добавить в корзину", он показывает слой, который по умолчанию скрыт. Смотрите два снимка экрана здесь:
Однако, когда я нажимаю кнопку "Добавить в корзину", слой не отображается. Снимок экрана Firebug ниже показывает, как выглядят элементы после того, как я нажал кнопку "Добавить в корзину".
Обратите внимание, что стиль элемента - "display: block" в соответствии с нормой jQuery, который затем должен переопределять стиль элемента CSS для "display: none". Я делал это сотни раз, если не больше, и это первый раз, когда он не работал. Теперь посмотрим снимок экрана Firebug ниже. Если я нажму на красный кружок с краем рядом с дисплеем: ни один в консоли отладки, слой будет выглядеть точно так, как должен.
Ниже приведены фрагменты того, что я считаю соответствующим кодом, но я не вижу, где проблема.
Код 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, но это не имело никакого значения. Также обратите внимание, что я не получаю ЛЮБЫЕ ошибки JS в Firebug.
Код 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, которая передает идентификатор, а затем запускает функцию jQuery hide(), которая также не работает.
Я пробовал все, что мог придумать. Я отключил другие JS и CSS и все еще не работает. Я консоль регистрировал все и добавлял предупреждения. Он запускает функцию, потому что она добавляет стиль отображения элементов в скрытый div, но что-то не позволяет переопределить файл CSS.
Любая помощь будет принята с благодарностью.