Блог

Главная - Вопросы по программированию - Изменить класс предыдущего селектора> дочернего элемента

Изменить класс предыдущего селектора> дочернего элемента

#jquery

#jquery

Вопрос:

У меня есть что-то вроде приведенного ниже, где я хочу, чтобы, если люди нажимали на ЛЮБОЙ из текста «Нажмите здесь«, текст [ЗНАЧОК] менял цвет. Я смог заставить Click Here 1 работать, но не 2 и 3. Пожалуйста, помогите, а также скажите мне, почему мой код не работает.

HTML

 <p class="learnMore"><strong>Click here 1</strong> <span class="red"> [ ICON ]</span></p>

<ul class="expandContainer">
<li>Click here 2</li>
<li>Click here 3</li>
</ul>

JS

 function learnMore(){
  $('.learnMore').click(function(){
  $('.learnMore span').toggleClass('green');  
});  

$('.expandContainer').click(function(){    
$(this).closest('p').find('span').toggleClass('green'); 
}); 
}

Вот codepen

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

1. это не так, как работает closest, как объясняется во многих повторяющихся сообщениях, подобных этому. api.jquery.com/closest

Ответ №1:

Ваш селектор был неправильным. Попробуйте, как показано в моем примере. PS: Я также изменил действие щелчка на отдельные li. Если вы хотите, чтобы действие работало сразу после щелчка по всему контейнеру ul, измените его обратно на:

   $('.expandContainer').click(function(){    
      $(this).siblings('p').find('span').toggleClass('green'); 
  });

РАБОЧИЙ ПРИМЕР: 

 $( document ).ready(function() {    
  learnMore(); 
});  

function learnMore(){
  $('.learnMore').click(function(){
      $('.learnMore span').toggleClass('green');  
  });  

  $('.expandContainer li').click(function(){    
      $(this).parent('ul').siblings('p').find('span').toggleClass('green'); 
  });   
   
}  
 .red {color:red}
.green{color:green}


.learnMore {cursor:pointer}
.expandContainer {cursor:pointer; border:1px solid red}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p class="learnMore">
  <strong>Click here 1</strong> 
  <span class="red"> [ ICON ]</span>  
</p>

<ul class="expandContainer">
<li>Click here 2</li>
<li>Click here 3</li>
</ul>

Ответ №2:

Метод jQuery .closest() ищет предков, ваш код не работает, потому что .expandContainer не находится внутри p .

Используйте это:

 function learnMore(){
  $('.learnMore').click(function(){
    $(this).find('span').toggleClass('green');  
  });  

  $('.expandContainer').click(function(){    
    $('.learnMore').find('span').toggleClass('green'); 
  }); 
}