Действие с элементом при нажатии

197

13 апреля 2018, 13:30

Здравствуйте, есть таблица в html с ячейками, у каждой ячейки один и обработчик:

<td class="block" onclick="sch();"></td>
<td class="block" onclick="sch();"></td>

Необходимо при нажатии на ячейку добавить/удалить класс, желательно не называть каждую ячейку по разному а именно к текущей нажатой ячейке применить данное действие, js код:

function sch() {
    $(this).classList.toggle('orange'); //не работает
}

В консоли выводится ошибка, подскажите пожалуйста решение, спасибо

Answer 1

<td class="block" onclick="sch(this);"></td>
<td class="block" onclick="sch(this);"></td>
function sch(elm) {
    $(elm).classList.toggle('orange');
}

Попробуйте так

Answer 2

ClassList это не из jQuery, а из нормального javascript. В jQuery есть метод toggleClass:

$('.block').click(function() { 
  $(this).toggleClass('orange'); 
})

.orange{ 
  background: orange; 
} 
td{ 
  padding: 20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td class="block">1</td> 
    <td class="block">2</td> 
  </tr> 
</table>

А без jQuery вам нужно и элемент получать нормальным способом, а не через $, иначе это не оригинальный DOM элемент и classList у него нету:

[...document.getElementsByClassName('block')].forEach(element =>  
    element.onclick = event => element.classList.toggle('orange'))

.orange{ 
  background: orange; 
} 
td{ 
  padding: 20px; 
}

<table> 
  <tr> 
    <td class="block">1</td> 
    <td class="block">2</td> 
  </tr> 
</table>

Создание Лендинга Landing page в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

HTML код в JS без кавычек. Как это реализовано в React?

В методе ReactDOMrender React-a мы можем объявлять компоненты сразу HTML кодом

187

HTML

Не работает click в javascript, нужна помощь

Всем привет, народ начинаю изучать js, вот есть скритец:

230

HTML

Браузер перестал видеть часть стилей? [требует правки]

Пациент - по ссылкеВчера перестали показываться часть стилей

158

HTML

Группировка блоков разный высоты в один контейнер

Как на bootstrap можно реализовать такой набор блоков? Запасной вариант для меня это js либа masonryКаким решением вы б воспользовались?

202