Получать пойдите dinamicamente, чтобы скрывать и показывать элементы

Поскольку я могу получать, они пойдите списков dinámicamente, например.

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

нажав каждый элемент списка я показываю iframes с функцией до настоящего времени, что он получает два, пойдите

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

(они пойдите списки связаны с элементами iframe) тогда деталь состоит, в том, что нажав на список, 2 например скрывает от себя iframe lista1 до там все добро, но когда он будет в lista5 как скрытие списка x что был в состоянии display block ранее? так как в функции я распределяю, они пойдите статической формы, есть какой-то способ знать, что он заносит в список, нажимают на показывать ее и скрывать предыдущий iframe, который состоит в том, чтобы он был выбран, я работаю с достаточно большим числом списков и осложнено добавлять функцию для каждой.

3
задан 09.05.2016, 22:45
3 ответа

Я оставляю тебя я soluciГіn:

//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>
0
ответ дан 24.11.2019, 14:28

Списки могли бы иметь класс, таким образом ты мог бы иметь по отношению ко всем вместе их в единственной переменной, например:

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

Чтобы после мочь скрывать их во всех добавляя или снимая классы (это больше performante, что менять прямо стиль и чище стили остаются в css и не в js)

После в событии onClick из каждого списка уже к тебе приходит список clickeada. Если списки вооружаются dinamicamente, событие click должно бы быть приведенным к сбою с body, ej:

    $('body').on('click', 'clase-compartida-por-las-listas', function(event){
        var elementoClikeado = event.target;
       ...
     })
2
ответ дан 24.11.2019, 14:28

Он рекомендовал бы тебе использовать классы для этого, тогда все могло бы делаться более характерным способом без необходимости создавать функции для каждого элемента списка.

Выбор тогда состоял бы в том, чтобы создавать "активный" класс, который будет видимым, и тогда только ты был бы должен распределять / снимать этот класс в div корреспондент. Кроме того чтобы избегать быть должным иметь функцию для каждый div/li ты мог бы сохранять цель внутри признака data-* (или прямо в href, если ты не будешь использовать это).

Здесь я оставляю пример:

$("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>
1
ответ дан 24.11.2019, 14:28

Теги

Похожие вопросы