Блог

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

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

#javascript #html #css

Вопрос:

Как настроить таргетинг на текущий класс зависания, когда есть другие классы с тем же именем? Я вижу много подобных вопросов, но все проблемы решаются с помощью Jquery. Можно ли использовать JavaScript с этим вопросом?

Я хочу добавить значок звезды на каждое изображение продукта. Он появится только при наведении курсора на изображение. Когда вы нажмете на звездочку, она переключится с .starsolid на .starsolid-close . Однако эффект наведения отображается только на первом дочернем элементе, что также отключает эффект переключения.

вот мой код

Кстати, я впервые задаю вопрос о stackoverflow, поэтому, если есть что-то, что я мог бы сделать лучше, чтобы сделать этот вопрос лучше, пожалуйста, скажите мне. Спасибо!

 
    <div class = "product divbox">
                <ul class = "horizontalpic">
                    <li class='productpic img1' onmouseover='setsolidstar()' onmouseout='setoriginalstar()'>
                        <a href="" ></a>
                        <div class = fakebutton></div>
                        <div class = 'star' ><i class="far fa-star fa-s"  style = color:black ></i></div>
                        <div class = 'star starsolid'><i class="fas fa-star fa-s" style = color:black></i></div>
                        <h3 class = 'productname'>coco crush</h3>
                        <h3 class = 'productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
                        <h3 class = 'price'>NT$ 44,000*</h3>
                        <h3 class = 'discover'><a href="">查看詳情  ></a></h3>
                    </li>
                    <li class='productpic img2' onmouseover='setsolidstar()' onmouseout='setoriginalstar()'>
                        <a href="" ></a>
                        <div class = fakebutton></div>
                        <div class = 'star' ><i class="far fa-star fa-s"  style = color:black ></i></div>
                        <div class = 'star starsolid'><i class="fas fa-star fa-s" style = color:black></i></div>
                        <h3 class = 'productname'>coco crush</h3>
                        <h3 class = 'productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
                        <h3 class = 'price'>NT$ 44,000*</h3>
                        <h3 class = 'discover'><a href="">查看詳情  ></a></h3>
                    </li></ul></div>

Я использовал onmouseover и onmouseout для создания эффекта наведения. Для эффекта переключения при нажатии на .fakebutton div .starsolid и .starsolid-close будет переключаться.

     const starhover = () => {
    const star = document.querySelector('.productpic .star');
    const starsolid = document.querySelector('.productpic .starsolid');
    const fakebutton = document.querySelector('.productpic .fakebutton');

    fakebutton.addEventListener('click', () => {
        starsolid.classList.toggle('starsolid-close');
        starsolid.style.transition = 'ease 0.5s';
     }); starhover();
    function setsolidstar(){
       document.querySelector('.productpic .star').style.opacity = '1';
       document.querySelector('.productpic .star').style.transition = 'ease 0.5s';
    }                                                                    
     function setoriginalstar(){
    document.querySelector('.productpic .star').style.opacity = '0';}

Ответ №1:

Я надеюсь, что правильно вас понял. Здесь я делаю звезду (букву «S») видимой при наведении курсора на продукт. При нажатии на звездочку будет переключено название класса «solid». Таким образом, сплошная звезда останется, когда вы переместите курсор от продукта.

Я добавляю прослушиватель событий click в <ul> элемент. Это гораздо более гибко, потому что элементы могут быть добавлены в список на более позднем этапе. Итак, единственное, что мне нужно проверить, так это наличие «звезды» в названии класса у цели события click. Если да, то я говорю «солидно». А дальше все остальное зависит от CSS.

 document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('ul.horizontalpic').addEventListener('click', e => {
    if(e.target.classList.contains('star')){
      e.target.classList.toggle('solid');
    }
  });
}); 
 .horizontalpic {
  list-style: none;
  padding: 0;
  margin: 0;
}
.productpic {
  border: solid black thin;
  margin: .5em;
}

.star {
  visibility: hidden;
  cursor: pointer;
}

li:hover .star {
  visibility: visible;
}

.star.solid {
  visibility: visible;
  font-weight: bold;
} 
 <div class="product divbox">
  <ul class="horizontalpic">
    <li class='productpic img1'>
      <a href=""></a>
      <div class=f akebutton></div>
      <div class='star'>S</div>
      <h3 class='productname'>coco crush</h3>
      <h3 class='productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
      <h3 class='price'>NT$ 44,000*</h3>
      <h3 class='discover'><a href="">查看詳情  ></a></h3>
    </li>
    <li class='productpic img2'>
      <a href=""></a>
      <div class=f akebutton></div>
      <div class='star'>S</div>
      <h3 class='productname'>coco crush</h3>
      <h3 class='productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
      <h3 class='price'>NT$ 44,000*</h3>
      <h3 class='discover'><a href="">查看詳情  ></a></h3>
    </li>
  </ul>
</div>

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

1. извините за поздний ответ. Теперь я могу заставить звезду появляться при наведении курсора на каждую картинку. Мне просто нужно немного изменить код, чтобы переключатель работал. Спасибо

2. Просто хочу, чтобы все прояснилось. Можете ли вы подробно объяснить, как код JS определяет, нажимаю ли я на первую букву S или на вторую? Большое Вам Спасибо!

3. @Ming Буква e относится к событию. В этом случае это событие щелчка, и событие щелчка содержит информацию о щелчке, одним из которых является цель-элемент, по которому был сделан щелчок. В моем коде прослушиватель событий находится в элементе ul, поэтому потенциально событие щелчка может иметь любой из элементов в качестве целевого, но я изменяю класс только в том случае, если имя целевого класса «звезда».

4. как событие clock узнает, на какой класс «звезда» я нажал?

5. Когда я сделаю тест if(e.target.classList.contains('star')){ Я знаю, что это ( e.target ) — элемент с именем класса «звезда». Так что мне не нужно знать больше.

Метки: , ,