Блог

Главная - Вопросы по программированию - Как я могу изменить содержимое внутри , чтобы оно соответствовало текущей нажатой кнопке?

Как я могу изменить содержимое внутри , чтобы оно соответствовало текущей нажатой кнопке?

#javascript #html #jquery #arrays #for-loop

#javascript #HTML #jquery #массивы #для цикла

Вопрос:

я пытаюсь изменить содержимое внутри ul , чтобы оно соответствовало текущему нажатию button .

 <div class="btns">
    <button class="active"></button>
    <button></button>
    <button></button>
</div>
<ul class="dynamiq_content">
    <li class="active"></li>
    <li></li>
    <li></li>
 </ul>

<script>
//variables 
     const ContentBtns = $(".btns button");
     const content = $(".dynamiq_content li");
//function 
    ContentBtns.on("click", function () {
          $(this).addClass("active").siblings().removeClass("active");
          content.addClass("active");
    });

</script>

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

1. Не могли бы вы объяснить подробнее, пожалуйста?

2. например: когда я нажимаю первую кнопку, я хочу показать только первую <li class=»active»></li>

3. и только у нажатого есть класс active и li?

Ответ №1:

Если вы хотите сопоставить кнопки и li элемент, чтобы вы могли работать с массивом.

Вот фрагмент:

 //variables 
     var ContentBtns = $(".btns button");
     var content = $(".dynamiq_content li");
//function 
for(let i=0;i<=ContentBtns.length;i  ){
ContentBtns.eq(i).on("click", function(){
  content.removeClass();
  ContentBtns.removeClass();
  ContentBtns.eq(i).addClass("active");
  content.eq(i).addClass("active");
});
} 
 .active{color:red} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns">
    <button class="active">a</button>
    <button>b</button>
    <button>c</button>
</div>
<ul class="dynamiq_content">
    <li class="active">a</li>
    <li>b</li>
    <li>c</li>
 </ul>

Ответ №2:

 content.addClass("active");

С помощью этой строки вы добавляете класс в активный класс к элементу ul, а не к одному из элементов li под ним.

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

Что-то вроде:

  ContentBtns.on("click", function () {
          $(this).addClass("active").siblings().removeClass("active");
          content.find("li")[pressedButtonIndex].addClass("active");
    });

Ответ №3:

попробуйте это:

  ContentBtns.on("click", function () {
      $(this).addClass("active").siblings().removeClass("active");
      var index = ContentBtns.index(this);
      content.removeClass("active").eq(index).addClass("active");


 });
Метки: ,