JQuery показать/скрыть не работает

У меня самая странная проблема с функциями jQuery hide() и show().

Сайт, над которым я работаю (разработка), здесь

На странице вы увидите продукт под Featured Products под названием Hydrate. У этого продукта есть некоторые варианты вкуса, поэтому я хочу сделать так, чтобы, когда пользователь нажимает кнопку "Добавить в корзину", он показывает слой, который по умолчанию скрыт. Смотрите два снимка экрана здесь:

enter image description hereenter image description here

Однако, когда я нажимаю кнопку "Добавить в корзину", слой не отображается. Снимок экрана Firebug ниже показывает, как выглядят элементы после того, как я нажал кнопку "Добавить в корзину". enter image description here

Обратите внимание, что стиль элемента - "display: block" в соответствии с нормой jQuery, который затем должен переопределять стиль элемента CSS для "display: none". Я делал это сотни раз, если не больше, и это первый раз, когда он не работал. Теперь посмотрим снимок экрана Firebug ниже. Если я нажму на красный кружок с краем рядом с дисплеем: ни один в консоли отладки, слой будет выглядеть точно так, как должен. 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, но это не имело никакого значения. Также обратите внимание, что я не получаю ЛЮБЫЕ ошибки 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.

Любая помощь будет принята с благодарностью.

Ответ 1

На вашей странице есть более одного divs, имеющих одинаковый ID - 'options_1'. Поэтому ваш код меняет только один из них. Если вы хотите показать все из них, вы можете сделать это, как показано ниже:

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

Ответ 2

Проблема, которую я чувствую, является причиной специфики

element.style имеет более высокую специфичность по сравнению с .productoptions, потому что свойство является частью атрибута style

Даже если вы 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(), чтобы указать вашу логику.

Ответ 3

Кажется, ваш DOM испорчен. Возможно, у вас отсутствует тег где-то или что-то еще?

В любом случае я посетил вашу страницу и когда я изменил:

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

к

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

все в порядке.

Ответ 4

У меня была аналогичная проблема, и после отладки выяснилось, что я заставил "display: inline-block! important" в одном из мест, которые переопределяли мою hide(). Не могли бы вы проверить, используется ли значение! В любом месте CSS, который может быть связан?