Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление класса текущему элементу (https://javascript.ru/forum/misc/79908-dobavlenie-klassa-tekushhemu-ehlementu.html)

_marisha 07.04.2020 09:36

Добавление класса текущему элементу
 
Доброго времени суток!
В товаре есть кнопка "Отложить".
<div class="put_off favoritesDiv">
<a class="favorItem text favorites buttonItem" onclick="addFavoriteItem" id="1356" data-item="1356">Отложить</a>
</div>

На данный момент при клике на ссылку добавляется класс "activeFavorite"
$('.favoritesDiv').addClass('activeFavorite');

Но дело в том, что на одной странице есть другой элемент с таким же классом и при клике на него класс добавляется также кнопке "Отложить", а этого не нужно.

Чтобы этого избежать, делаю так:
$(this).addClass('activeFavorite');

В данном случае класс применяется самой ссылке, а необходимо диву.

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

laimas 07.04.2020 09:38

$(this).parent()...

_marisha 07.04.2020 10:06

Цитата:

Сообщение от laimas (Сообщение 522380)
$(this).parent()...

- имеете ввиду так?
$(this).parent().addClass('activeFavorite');

В данном случае не срабатывает :-?

рони 07.04.2020 10:11

Цитата:

Сообщение от _marisha
В данном случае не срабатывает

вы что-то не договариваите

рони 07.04.2020 10:18

_marisha,
:-?
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .favoritesDiv.activeFavorite {
        border: 1px solid #FF0000;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".favorItem").on("click", function() {
     $(this).parent().addClass('activeFavorite');
})
});
  </script>
</head>
<body>
<div class="put_off favoritesDiv">
<a class="favorItem text favorites buttonItem"  id="1356" data-item="1356">Отложить</a>
</div></body>
</html>

_marisha 07.04.2020 12:41

Походу понятно почему вариант с
$(this).parent().addClass('activeFavorite');
не срабатывает.
В консоли в this находится структура $.ajax :cray:
Как все работает, при клике на кнопку срабатывает функция, в которой идет ajax на файл, где в зависимости от пользователя происходит обработка результата. Данный результат возвращается в функцию и происходит добавление/удаление классов на основании полученных данных.
Запутано...

laimas 07.04.2020 13:06

Ну так по результату ответа сервера и действуйте. Кстати, "Отложить" всегда или же все-таки только у тех, которые не добавлялись?

_marisha 07.04.2020 13:18

Цитата:

Сообщение от laimas (Сообщение 522398)
Ну так по результату ответа сервера и действуйте.

- действую:) Только в этом случае вариант с this не срабатывает :-?
Или что-то делаю не так?

Цитата:

Сообщение от laimas (Сообщение 522398)
Кстати, "Отложить" всегда или же все-таки только у тех, которые не добавлялись?

- "Отложить" только тем, которые не добавлялись. С "отложить" всё работает, а вот с "отложено" класс добавляется самой ссылке, а не диву. Где-то видимо упускаю момент...

laimas 07.04.2020 13:26

Цитата:

Сообщение от _marisha
Или что-то делаю не так?

Потому, что в success this уже другой контекст, сохраните источник события (this) до ajax, а затем по ответу используйте его.

PS. Если сам источник не нужен далее, то сразу сохранить родителя:

var parent = $(this).parent();
$.ajax({
    ....
    success: function(d) {
         //если условия ... и 
         parent.addClass.... 
    }
})

_marisha 07.04.2020 13:56

Цитата:

Сообщение от laimas (Сообщение 522401)
Потому, что в success this уже другой контекст, сохраните источник события (this) до ajax, а затем по ответу используйте его.

PS. Если сам источник не нужен далее, то сразу сохранить родителя:

var parent = $(this).parent();
$.ajax({
    ....
    success: function(d) {
         //если условия ... и 
         parent.addClass.... 
    }
})

- делаю как Вы сказали, но в parent нет самого дива. Результат
console.log(parent)
выглядит так


Часовой пояс GMT +3, время: 16:08.