Почему classList.add не работает для html onClick - PullRequest
Новая
       15

Почему classList.add не работает для html onClick

3 голосов
/ 03 мая 2019

Я пытаюсь создать динамический календарь.Мой первый шаг - добавить классы к определенным элементам по щелчку. Но я натолкнулся на проблему, classList.add ('');не работает в HTML.Я могу сделать что-то не так, я не уверен. 

<ul class="days">
  <li onClick='#'>1<li>
  <li onclick="this.classList.add('active')">2</li>
  <li onClick='#'>3</li>
  <li onClick='#'>4</li>
  <li onClick='#'>5</li>
  <li onClick='#'>6</li>
  <li onClick='#'>7</li>
  <li onClick='#'>8</li>
  <li onClick='#'>9</li>
  <li onClick='#'><span class="active">10</span></li>
</ul>

CSS 

  /* Highlight the "current" day */
   .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white 
   }

Я пытаюсь применить событие onclick к числу 2. Но classList.add ('');не работает.Я уверен, что есть причина ... любая помощь будет оценена.

Ответы [ 4 ]

2 голосов
/ 03 мая 2019

Он не работает из-за вашего правила CSS или DOM.

.days li .active применяет стиль к дочернему узлу <li> с классом active, но, используя this.classList.add('active'), выдобавьте класс active к тегу <li>, и правило CSS должно быть .days li.active.

1 голос
/ 03 мая 2019

Ваш селектор CSS неправильный, вам нужно удалить пробел между li и .active

как 

.days li.active {
  padding: 5px;
  background: '#1abc9c';
  color: white 
}
0 голосов
/ 03 мая 2019

Проблема не в classList, проблема в селекторе..days li .active выберет все элементы с классом active, которые находятся внутри <li>, а li находится внутри элемента с классом .days.Там не должно быть места ч / б li и .active

.days li.active
0 голосов
/ 03 мая 2019

Прежде всего, ваш html неверен для первого элемента li.

Во-вторых, я думаю, что, возможно, вас вводит в заблуждение ваш css-селектор, поскольку 10-й элемент li имеет промежуток внутри, а 2-й нет. Проверьте эту скрипку

https://jsfiddle.net/h6w7kaoy/1/

HTML: 

 <ul class="days">
      <li onClick='#'>1</li>
      <li onClick="this.classList.add('active')">2</li>
      <li onClick='#'>3</li>
      <li onClick='#'>4</li>
      <li onClick='#'>5</li>
      <li onClick='#'>6</li>
      <li onClick='#'>7</li>
      <li onClick='#'>8</li>
      <li onClick='#'>9</li>
      <li onClick='#'><span class="active">10</span></li>
    </ul>

CSS: 

li.active, li span.active {
  color: blue;
  font-weight: bold;
}

Если вы попытаетесь удалить li.active из селектора css, вы увидите, что нажатие на элемент li не повлияет на визуальные эффекты (но класс все еще добавляется ;-))

...