Блог

Главная - Вопросы по программированию - Показывать определенный список на основе аргумента функции в jQuery

Показывать определенный список на основе аргумента функции в jQuery

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь показывать и скрывать определенные списки на основе переданного аргумента функции, есть ли способ использовать jquery show () и hide () для достижения этого? В настоящее время, если добавить show () к функции, я получаю сообщение об ошибке «show () не является функцией». Как мне добавить отображение / скрытие в параметр функции или это невозможно, как я делаю?

codepen:https://codepen.io/mDDDD/pen/WNwrMLW

 $('.additional-questions').hide();
    
        $('.show-list').click(function () {
            $('.additional-questions').show();
          
          additionalQuestionToShow([0]).show().siblings().hide();
        });
    
        function additionalQuestionToShow($element) {
          
          var list = $('.additional-questions-list');
          for (var i = 0; i < list.length; i  ) {
            var listToShow = list[$element];
    
            console.log(listToShow);
          }
        }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="additional-questions">
    
                    <div class="question-row">
                      <p class="text--bold">
                        Additional questions.
                      </p>
                    </div>
    
                    <!-- List 1 -->
                    <ul class="additional-questions-list">
                      <li>
          LIST ONE
                      </li>
                      <li>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                    </ul>
    
                    <!-- List 2 -->
                    <ul class="additional-questions-list">
                      <li>
    LIST TWO
                      </li>
                      <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                    </ul>
    
                    <!-- List 3 -->
                    <ul class="additional-questions-list">
                      <li>
    LIST THREE
                      </li>
                      <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                      <li>
                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </li>
                    </ul>
    
                  </div><!-- /.additional-questions -->
    
    
    <button class ="show-list">SHOW LIST</button>

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

1. В опубликованном вами коде нет ошибки?

2. @FluffyKitten обновил codepen в соответствии с тем, чего я пытаюсь достичь, спасибо 🙂

3. Не могли бы вы также обновить код в вопросе, пожалуйста? Вопросы здесь должны быть автономными и включать всю необходимую информацию. Внешние ссылки в порядке, но только когда код также находится в вопросе, потому что внешние ссылки могут со временем меняться или прерываться, что делает вопрос бесполезным для пользователей в будущем 🙂 ОБНОВЛЕНИЕ: Кроме того, codepen, похоже, в любом случае совпадает с этим кодом?

4. @FluffyKitten хороший вызов и обновлен… еще раз спасибо

Ответ №1:

Если вы передаете индекс, вы можете использовать jquery eq , чтобы использовать это число для захвата элементов, соответствующих селектору в этом индексе. Индекс основан на нуле, поэтому вместо того, чтобы начинаться с 1, они начинаются с 0.

Я также добавил некоторый код для отображения / скрытия элементов до и после щелчка, чтобы показать список.

 $('.additional-questions-list').hide();
$('.question-row').hide();

$('.show-list-1').click(function() {
  $('.additional-questions-list').hide();
  additionalQuestionToShow(0);
});

$('.show-list-2').click(function() {
  $('.additional-questions-list').hide();
  additionalQuestionToShow(1);
});

$('.show-list-3').click(function() {
  $('.additional-questions-list').hide();
  additionalQuestionToShow(2);
});

function additionalQuestionToShow($element) {
  $('.question-row').show();
  $('.additional-questions-list').eq($element).show();
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="additional-questions">

  <div class="question-row">
    <p class="text--bold">
      Additional questions.
    </p>
  </div>

  <!-- List 1 -->
  <ul class="additional-questions-list">
    <li>
      LIST ONE
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
  </ul>

  <!-- List 2 -->
  <ul class="additional-questions-list">
    <li>
      LIST TWO
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
  </ul>

  <!-- List 3 -->
  <ul class="additional-questions-list">
    <li>
      LIST THREE
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
    <li>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </li>
  </ul>

</div>
<!-- /.additional-questions -->


<button class="show-list-1">SHOW LIST 1</button>
<button class="show-list-2">SHOW LIST 2</button>
<button class="show-list-3">SHOW LIST 3</button>