Блог

Главная - Вопросы по программированию - Щелкните ссылку, чтобы показать div внутри контейнера

Щелкните ссылку, чтобы показать div внутри контейнера

#jquery

#jquery

Вопрос:

У меня есть несколько контейнеров (li). Внутри есть ссылки. При нажатии им нужно открыть соответствующий div (и скрыть несоответствующие div).

Я могу перебирать разделы, но не могу их открыть или скрыть.

Codepen:https://codepen.io/warddem/pen/kkzrPx

 <ul>
  <li>
    <h3>Market study</h3>
    <div>
      <a href="#" data-toggle="#div1" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1" class="optionDiv">Results: </div>
      <div id="div2" class="optionDiv">Learned: </div>
      <div id="div3" class="optionDiv">Deliverables: </div>
    </div>
  </li>
  <li>
    <h3>Competitive research</h3>
    <div>
      <a href="#" data-toggle="#div1" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1" class="optionDiv">Results: </div>
      <div id="div2" class="optionDiv">Learned: </div>
      <div id="div3" class="optionDiv">Deliverables: </div>
    </div>
  </li>
</ul>

jQuery('.showSingle').click(function() {

    var idOpen = $(this).siblings("div");
    var myIndex = $(this).index();

    if (idOpen.is("div")) {
      // HIDE ALL DIVS IN PARENT
      var divLength = idOpen.get(myIndex).id.length;
      for (var i = 0, l = divLength; i < l; i  ) {
        console.log('divs to hide', idOpen[i]);
        //HIDE DOESN'T WORK
        //idOpen[i].hide();
      }

      // HOW TO SHOW LINKED DIV ???
      console.log('div id to open: ', idOpen.get(myIndex).id);
    }

  })

Комментарии:

1. Идентификаторы должны быть уникальными.

Ответ №1:

Начните с создания уникального идентификатора. (Хотя это, похоже, не имеет отношения к возникшей у вас проблеме.)

.get() возвращает элемент как element. функции jQuery не привязаны к ним. .eq() возвращает элемент как часть нового объекта jQuery.

 <ul>
  <li>
    <h3>Market study</h3>
    <div>
      <a href="#" data-toggle="#div1a" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2a" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3a" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1a" class="optionDiv">Results: </div>
      <div id="div2a" class="optionDiv">Learned: </div>
      <div id="div3a" class="optionDiv">Deliverables: </div>
    </div>
  </li>
  <li>
    <h3>Competitive research</h3>
    <div>
      <a href="#" data-toggle="#div1b" class="showSingle">Results</a>
      <a href="#" data-toggle="#div2b" class="showSingle">Learned</a>
      <a href="#" data-toggle="#div3b" class="showSingle">Deliverables</a>
      <a href="#" data-toggle="#close" class="">Close all</a>
      <div id="div1b" class="optionDiv">Results: </div>
      <div id="div2b" class="optionDiv">Learned: </div>
      <div id="div3b" class="optionDiv">Deliverables: </div>
    </div>
  </li>
</ul>
  
 jQuery('.showSingle').click(function() {

    var idOpen = $(this).siblings("div");
    var myIndex = $(this).index();

    if (idOpen.is("div")) {
      // HIDE ALL DIVS IN PARENT
      var divLength = idOpen.get(myIndex).id.length;
      for (var i = 0, l = divLength; i < l; i  ) {
        console.log('divs to hide', idOpen[i]);
        //HIDE DOESN'T WORK
        idOpen.eq(i).hide();
      }

      // HOW TO SHOW LINKED DIV ???
      idOpen.eq(myIndex).show();
      console.log('div id to open: ', idOpen.get(myIndex));
    }

  });

Комментарии:

1. 1 для перехода с индексом a элементов… но нет необходимости делать это для цикла …. вот краткая версия codepen.io/anon/pen/RGEArL

2. @DaniP Да, определенно есть более понятные способы делать такого рода вещи. Я пошел на минимальные изменения в исходном коде, чтобы не путать вещи.

3. Работает идеально, спасибо за вашу помощь. @DaniP отличный codepen, чистый и простой. Очень приятно, что мне не нужно создавать подобные уникальные идеи (быстрее копировать и вставлять разделы. Спасибо за отличную помощь.

4. Мы рады помочь вам @WarddeMuynck пожалуйста, отметьте этот вопрос как решенный, это правильный ответ

5. @WarddeMuynck в левой части этого ответа, где вы можете увидеть голоса за ответ под номером, это серая галочка. Вы можете изменить ее на зеленую, нажав на нее в ответе, который, по вашему мнению, является правильным или который поможет вам