web-dev-qa-db-ja.com

jQueryの表示/非表示が機能しない

JQueryのhide()関数とshow()関数で最も奇妙な問題が発生しています。

私が取り組んでいるサイト（開発ビルド）は ここ

このページでは、ハイドレートと呼ばれる注目の製品の下に製品が表示されます。この製品にはいくつかのフレーバーオプションがあるので、ユーザーが[カートに追加]ボタンをクリックすると、デフォルトで非表示になっているレイヤーが表示されるようにします。ここで2つのスクリーンショットを参照してください。

enter image description hereenter 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>

[カートに追加]ボタンが2つあることに注意してください。ここのコードの最後のもの（最初に表示されるもの）だけに「choose_options」クラスがあります。また、オーバーレイ内の[キャンセル]ボタンで、idを渡してjQuery hide（）関数を実行するclose_layerという関数を呼び出しましたが、これも機能しません。

私は考えられるすべてを試しました。他のJSとCSSを無効にしましたが、それでも機能しません。コンソールにすべてを記録し、アラートを追加しました。 IS関数を実行しているのは、要素の表示スタイルを非表示のdivに追加しているが、CSSファイルをオーバーライドできないためです。

どんな助けでも大歓迎です。

javascriptjqueryhtml5css3
10
Andrew Christensen

あなたのページには、同じIDを持つ複数のdivがあります-'options_1 '。したがって、コードはそのうちの1つだけを変更します。それらすべてを表示したい場合は、以下のように実行できます。

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

私が感じる問題は特異性によって引き起こされています

_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()を使用してロジックを指定します。

2
Sushanth --

DOMがめちゃくちゃになっているようです。おそらくどこかにタグがありませんか？

とにかく私はあなたのページにアクセスしました、そして私が変わるとき：

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

に

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

すべて順調。

1
Malk

同様の問題が発生し、デバッグ後に、hide（）をオーバーライドしていた場所の1つで「display：inline-block！important」を強制したことがわかりました。 ！importantがCSSの関連する可能性のある場所で使用されているかどうかを確認できますか？

0
johnmanoahs