poner - Mostrar/Ocultar múltiples Divs con Jquery

ocultar input javascript

Question

Quiero usar algunos botones para mostrar / ocultar múltiples divs usando jquery.

La página mostrará inicialmente todos los divs. La idea entonces es que habrá un botón para restablecer (mostrar todo) y luego botones separados para mostrar un div en particular mientras se oculta el resto.

Cualquier ayuda sería muy apreciada.

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>

Answer 1

Asigna a cada div una class . Luego puedes realizar acciones en todos ellos:

$(".divClass").hide();

Así que cada botón puede hacer:

$(".divClass").hide()
$("#specificDiv").show();

Puede hacer esto más genérico y usar la convención obvia: el botón y el div con el mismo número en la identificación están relacionados. Asi que:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}

Answer 2

Si caen en grupos lógicos, probablemente optaría por el enfoque de clase que ya se enumeró aquí .

Mucha gente parece olvidar que en realidad también puede seleccionar varios elementos por ID en el mismo selector de jQuery :

$("#div1, #div2, #div3").show();

Donde ''div1'', ''div2'' y ''div3'' son todos los atributos de id en varios divs que desea mostrar a la vez.

Answer 3

Si desea poder mostrar / ocultar divs singulares y / o grupos de divs con menos código, solo aplíqueles varias clases para insertarlos en grupos si es necesario.

Ejemplo:

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

Entonces solo necesita usar un identificador para vincular la acción con el objetivo, y con 5,6 líneas de código jQuery tiene todo lo que necesita.

Answer 4

Solo una pequeña nota al margen ... Si está usando esto con otros scripts, el $ en la última línea causará un conflicto. Simplemente reemplázalo con jQuery y estarás bien.

jQuery(function(){
     jQuery(''#showall'').click(function(){
           jQuery(''.targetDiv'').show();
    });
    jQuery(''.showSingle'').click(function(){
          jQuery(''.targetDiv'').hide();
          jQuery(''#div''+jQuery(this).attr(''target'')).show();
    });
});

http://jsfiddle.net/XwN2L/4764/

Answer 5

Tuve este mismo problema, leí esta publicación, pero terminé de construir esta solución que selecciona los divs dinámicamente obteniendo el ID de una clase personalizada en href usando la función attr() JQuery''s.

Aquí está la JQuery:

$(''a.custom_class'').click(function(e) {
  var div = $(this).attr(''href'');
  $(div).toggle(''fast'');
  e.preventDefault();
}

Y solo tienes que crear un enlace como este en el HTML:

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>

Answer 6

Ver este Example

Html:

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript:

$(''#showall'').click(function(){
    $(''div'').show();
});

$(''#showdiv1'').click(function(){
    $(''div[id^=div]'').hide();
    $(''#div1'').show();
});
$(''#showdiv2'').click(function(){
    $(''div[id^=div]'').hide();
    $(''#div2'').show();
});

$(''#showdiv3'').click(function(){
    $(''div[id^=div]'').hide();
    $(''#div3'').show();
});

$(''#showdiv4'').click(function(){
    $(''div[id^=div]'').hide();
    $(''#div4'').show();

});

Answer 7

enfoque simple pero estúpido:

$(''#showall'').click(function(){
    $(''div[id^=div]'').show();
});

$(''#showdiv1'').click(function(){
    $(''#div1'').show();
    $(''div[id^=div]'').not(''#div1'').show();
});

en cuanto a una mejor: agregue una clase común a todos los div, y use algún atributo en los botones con id de los divs de destino

Answer 8

jQuery(function() {
  jQuery(''#showall'').click(function() {
    jQuery(''.targetDiv'').show();
  });
  jQuery(''.showSingle'').click(function() {
    jQuery(''.targetDiv'').hide();
    jQuery(''#div'' + $(this).attr(''target'')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/