Obtener id dinamicamente para ocultar y mostrar elementos

publicado por: Anonymous

Como puedo obtener los id de listas dinámicamente, por ejemplo..

<li>
  <a href="#">lista1</a>
</li>
<li>
  <a href="#" onclick="ocultar;">lista2</a>
</li>
<li>
  <a href="#">lista3</a>
</li>
<li>
  <a href="#">lista4</a>
</li>
<li>
  <a href="#">lista5</a>
</li>
<li>
  <a href="#">lista5</a>
</li>

al pulsar cada elemento de lista estoy mostrando iframes con una funcion hasta ahora que obtiene dos id

function ocultar() {
    document.getElementById('DivDelista1').style.display = "none";
    document.getElementById('DivDelista2').style.display = "block";
};

(los id listas están relacionados con elementos iframe) entonces el detalle es que al presionar lista 2 por ejemplo se oculta el iframe de la lista1 hasta ahí todo bien pero cuando este en lista5 como ocultar la lista x que estaba en estado display block anteriormente?
ya que en la función estoy asignando los id de forma estatica,
hay alguna manera de saber que lista se presiono mostrarla y ocultar el iframe anterior cual sea que se haya seleccionado, estoy trabajando con un numero bastante grande de listas y es complicado agregar una función para cada una.

solución

Te dejo mi solución:

_x000D_

_x000D_

//Ocultamos todos los div al iniciar_x000D_
$(".divlista").hide();_x000D_
_x000D_
//Al hacer click en un elemento ocultamos todo _x000D_
//y mostramos el div indicado basado en el identificador del link_x000D_
$(".lista").on("click",function(){_x000D_
  $(".divlista").hide();_x000D_
  $("#divlista"+ $(this).attr("id")).show();_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<li>_x000D_
  <a href="#" class="lista" id="1">lista1</a>_x000D_
</li>_x000D_
<li>_x000D_
  <a href="#" class="lista"  id="2">lista2</a>_x000D_
</li>_x000D_
<li>_x000D_
  <a href="#" class="lista"  id="3">lista3</a>_x000D_
</li>_x000D_
_x000D_
<div id="divlista1" class="divlista">_x000D_
  DIV LISTA 1_x000D_
</div>_x000D_
_x000D_
<div id="divlista2" class="divlista">_x000D_
  DIV LISTA 2_x000D_
</div>_x000D_
_x000D_
<div id="divlista3" class="divlista">_x000D_
  DIV LISTA 3_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *