Estoy teniendo el más extraño problema con jQuery hide() y show() funciones.

El sitio en el que estoy trabajando (versión en desarrollo) es aquí

En la página, podrás ver un producto en los Productos Destacados llamado a Hidratar. Este producto tiene algunas opciones de sabor así que lo que quiero hacer es que cuando el usuario hace clic en el botón Añadir al Carro se muestra una capa que se encuentra por defecto oculto. Ver las dos capturas de pantalla aquí:

de jQuery para mostrar/ocultar no funciona

Sin embargo, cuando hago clic en el botón Añadir Al Carro, la capa no aparece. El Firebug siguiente captura de pantalla muestra lo que los elementos después de que yo haya hecho clic en el botón Añadir Al Carro.
de jQuery para mostrar/ocultar no funciona

Observe que el elemento es de estilo «display: block» como por el jQuery norma, la cual, a continuación, debe reemplazar el CSS del elemento de estilo «display: none». Yo lo he hecho cientos de veces, si no más, y esta es la primera vez que no ha funcionado. Ahora mira en el Firebug captura de pantalla de abajo. Si hago clic en la diagonal roja-círculo junto a display:none en la consola de depuración, la capa aparece exactamente como debería.
de jQuery para mostrar/ocultar no funciona

A continuación son fragmentos de lo que yo creo que son pertinentes del código, pero no puedo ver donde está el problema.

Código 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;
}

El Código 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();
    });
});

Nota: pensé que tal vez había alguna manera de que algo estaba interfiriendo por lo que he implementado noConflict pero no hace ninguna diferencia. También tenga en cuenta que no estoy recibiendo NINGÚN JS errores en Firebug.

Código 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>

Tenga en cuenta que hay dos Agregar Al Carrito botones. Sólo el último en el código aquí (el que aparece al principio) tiene la «choose_options» de la clase. También, en el botón Cancelar en el interior de la superposición, he llamada a una función denominada close_layer que pasa el id y, a continuación, ejecuta el jQuery hide() función que también no funciona.

He intentado todo lo que puedo pensar. Yo lo he desactivado otras JS y CSS y todavía no funciona. He consola registra todo y se añade alertas. Se ESTÁ ejecutando la función porque se agrega el elemento de estilo de presentación para el div oculto pero algo no está dejando que reemplazar el archivo CSS.

Cualquier ayuda sería muy apreciada.

No se producen resultados similares en otros navegadores, ie, Chrome?
Donde es el style="display:block" de ser añadido? Ya que usted menciona que se ha deshabilitado JS y aún no funciona, podría más probable es que se establezca en el lado del servidor. Que debe ser eliminado para permitir el CSS para hacer su cosa.
Anthony – sí-mismo problema en todos los navegadores que he probado. Chrome, Safari y Firefox.
Lanthe – «display:block» se añade dinámicamente por jQuery al hacer clic en el botón Añadir al Carro.

OriginalEl autor Andrew Christensen | 2013-01-15

4 Comentarios

  1. 9

    En su página, hay más de una divs tiene el mismo ID – ‘options_1’. Por lo tanto el código sólo el cambio de uno de ellos. Si desea mostrar a todos ellos, entonces usted puede hacerlo de la siguiente manera:

    jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();
    Este trabajó para la mayor parte! De hecho, el problema que permanece es probablemente algo relacionado. Pero lo curioso es que veo mi código fuente y hacer una búsqueda y encontrar solamente una instancia de cada producto de la lista de «options_1» sólo se produce una vez. Pero el código que proporciona solucionado ese problema, así que gracias! Ahora el único problema es que cuando hago clic en el desplegable en el interior de la capa, el regulador recibe todos los jacked. Voy a tratar de entender que uno por mi cuenta.
    Yo no comprobar su código fuente. Pero si usted busca en su página con jQuery(‘div[id=options_1]’), que se puede encontrar probablemente tres DIVs: Lo mejor sería comprobar por qué hay tres.

    OriginalEl autor AnthonyY

  2. 2

    El problema que yo siento es ser la causa por especificidad

    element.style tiene una mayor especificidad en comparación con .productoptions porque la propiedad es parte de el atributo de estilo

    Incluso si usted apply the class para el elemento element.style será preferencia. .

    La mejor opción para usted es Remove the style attribute from your HTML..

    Agregar el display:block dentro de una clase..

    .block
    {
    display : block;
    }

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

    ahora debería parecerse

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

    Ahora uso .addClass() y .removeClass() para especificar su lógica.

    Es en realidad al revés de lo que estás pensando. El elemento de estilo se añade dinámicamente por jQuery cuando hago clic en el botón Añadir Al Carro. El display:none se define en la hoja de estilos, pero cuando hago clic en el botón anexar el style=»display:block» para el elemento en sí. Este es mi confusión debido a que el elemento debe reemplazar la hoja de estilos a la derecha?
    He intentado hacer addClass y removeClass así y no tiene ningún efecto. Es como no iba a cambiar los estilos aunque cambió el nombre de la clase. Es realmente frustrante.
    Quitar el css en línea desde el html ?
    No hay css en línea. En el html original sólo hay en la clase y el número de identificación.

    OriginalEl autor Sushanth —

  3. 1

    Parece que su DOM está en mal estado. Tal vez usted tiene una falta de etiqueta en algún sitio o algo?

    De todos modos he visitado su página y cuando cambio:

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

    a

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

    todo está bien.

    He intentado esto y mientras lo hacía trabajar a poner la capa en, todavía no puedo quitar la capa. Además, si miro la consola de Firebug, el original div todavía está allí y se puso a display:none a pesar de que es visible, por lo que anexando, estamos duplicando. Gracias por la idea, aunque!
    A la derecha el código no era la solución. Sólo apuntar que algo parece estar mal con su DOM estructura. Si desea utilizar este código para «arreglar» el problema podría intentar moveTo() lugar.

    OriginalEl autor Malk

  4. 0

    He tenido un problema similar y después de la depuración encontré con que me había forzado » display: inline-block !importante’ en uno de los lugares que fue primordial de mi hide(). Podría usted comprobar si el !es importante utilizar en cualquier lugar en el CSS que puede estar relacionado?

    OriginalEl autor johnmanoahs

Dejar respuesta

Please enter your comment!
Please enter your name here