Estoy buscando ocultar un elemento HTML si tiene ambas clases o solo la clase .more-options, pero si solo tiene la clase .show-required no haga nada.

Esto es lo que tengo

Html:

<tr class="show-required">
    <td>...</td>
</tr>
<tr class="show-required more-options">
    <td>...</td>
</tr>
<tr class="more-options">
    <td>...</td>
</tr>

Quiero que solo oculte / muestre el segundo y el tercero <tr> y deje el otro solo. Además, para aclararlo, debe tener ambas clases o simplemente .more-options para el código posterior.

Cualquier ayuda sería apreciada.

EDITAR:

Necesito que esto se haga con javascript / Jquery

0
Josh Young 28 ago. 2014 a las 00:13

5 respuestas

La mejor respuesta

Selector de clase múltiple:

.class1.class2
{

}

Los selectores múltiples están separados por comas:

.class1.class2,
.class1
{

}

Entonces, en tu caso:

.more-options, 
.show-required.more-options
{
    //style
}

EDITAR

Según sea necesario, jquery selector utiliza selectores css, por lo que:

$(".more-options, .show-required.more-options").show(); // or hide
2
LcSalazar 27 ago. 2014 a las 20:17

Puede utilizar esto:

$("tr").each(
    function(){
             if($(this).hasClass("more-options")){
                $(this).hide();
             }
});

Violín

0
Alex Char 27 ago. 2014 a las 20:24

Esto parece demasiado simple, pero debería hacer lo que dices.

$('.more-options').hide();

Sus requisitos hacen que parezca que desea que se oculte cualquier cosa con more-options, incluso si tienen otra clase en ellos. Dado que los selectores de CSS ignoran las clases que no se mencionan, esto funcionará bien.

0
StriplingWarrior 27 ago. 2014 a las 20:19

No necesita incluir un selector multiclase, la cascada normal es suficiente:

.more-options {
    display: none;
}
.show-required {
    display: table-row;
}

Ver http://jsfiddle.net/Volker_E/3htzrhLb/

1
Volker E. 27 ago. 2014 a las 20:20
.more-options, 
.show-required.more-options {
  display: none;
}

http://jsfiddle.net/Lh0b1ten/1/

0
sbeliv01 27 ago. 2014 a las 20:16