Get id dynamically to hide and show items

Question

Get id dynamically to hide and show items

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

3

How can I get list ids dynamically, for example ..

<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>

by pressing each list item I am showing iframes with a function so far that you get two id

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

(the id lists are related to iframe elements) so the detail is that pressing list 2 for example hides the iframe of the lista1 until there everything is fine but when it is in lista5 like hiding the list x that was in display block state before? since in the function I'm assigning ids in a static way, there is some way of knowing that list is pressed to show it and hide the previous iframe whatever it is selected, I am working with a fairly large number of lists and it is complicated to add a function for each one.

javascript jquery asp.net

asked by matteo 09.05.2016 в 21:35

source

3 answers

2

The lists could share a class, that way you could have them all together in a single variable, for example:

   var $listas = $('clase-compartida-por-las-listas');

Then you can hide them all by adding or removing classes (it's more performant than directly changing the style and cleaner the styles are in css and not in js)

Afterwards, in the onClick event of each list, the clicked list comes to you. If the lists are dynamically assembled, the click event should hang from the body, eg:

    $('body').on('click', 'clase-compartida-por-las-listas', function(event){
        var elementoClikeado = event.target;
       ...
     })

answered by 09.05.2016 в 21:50

1

I would recommend that you use classes for this, then everything could be done in a more generic way without having to create functions for each element of the list.

One option would then be to create an "active" class that will be visible, and then you would only have to assign / remove that class to the corresponding% div . Also to avoid having to have a function for each div / li you could save the target within an attribute data-* (or directly in the href if you will not use it).

Here is an example:

$("ul li a").on("click", function(e) {
  e.preventDefault();
  $("div.activo").removeClass("activo");
  $($(this).attr("href")).addClass("activo");
});

div { 
  display:none; 
}
div.activo { 
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#DivDelist1">lista1</a>
  </li>
  <li>
    <a href="#DivDelist2">lista2</a>
  </li>
  <li>
    <a href="#DivDelist3">lista3</a>
  </li>
</ul>
<div id="DivDelist1" class="activo">Soy el DIV de la Lista 1</div>
<div id="DivDelist2">Soy el DIV de la Lista 2</div>
<div id="DivDelist3">Soy el DIV de la Lista 3</div>

answered by 09.05.2016 в 21:55

Problem UPDATE with AJAX MySQL Connector / Python does not perform the Commit

score 0 · Accepted Answer

I leave you my solution:

//Ocultamos todos los div al iniciar
$(".divlista").hide();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#" class="lista" id="1">lista1</a>
</li>
<li>
  <a href="#" class="lista"  id="2">lista2</a>
</li>
<li>
  <a href="#" class="lista"  id="3">lista3</a>
</li>

<div id="divlista1" class="divlista">
  DIV LISTA 1
</div>

<div id="divlista2" class="divlista">
  DIV LISTA 2
</div>

<div id="divlista3" class="divlista">
  DIV LISTA 3
</div>