Форум

_marisha · #1 (**permalink**) 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 · #2 (**permalink**) 07.04.2020, 09:38

$(this).parent()...

_marisha · #3 (**permalink**) 07.04.2020, 10:06

Сообщение от laimas

$(this).parent()...

- имеете ввиду так?

$(this).parent().addClass('activeFavorite');

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

рони · #4 (**permalink**) 07.04.2020, 10:11

Сообщение от _marisha

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

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 07.04.2020, 12:41

Походу понятно почему вариант с

$(this).parent().addClass('activeFavorite');

не срабатывает.
В консоли в this находится структура $.ajax

Как все работает, при клике на кнопку срабатывает функция, в которой идет ajax на файл, где в зависимости от пользователя происходит обработка результата. Данный результат возвращается в функцию и происходит добавление/удаление классов на основании полученных данных.
Запутано...

laimas · #7 (**permalink**) 07.04.2020, 13:06

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

_marisha · #8 (**permalink**) 07.04.2020, 13:18

Сообщение от laimas

Ну так по результату ответа сервера и действуйте.

- действую

Только в этом случае вариант с this не срабатывает

Или что-то делаю не так?

Сообщение от laimas

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

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

laimas · #9 (**permalink**) 07.04.2020, 13:26

Сообщение от _marisha

Или что-то делаю не так?

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

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

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

_marisha · #10 (**permalink**) 07.04.2020, 13:56

Сообщение от laimas

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

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

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

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

console.log(parent)

выглядит так

Форум

Справочник

Discord чат

Курсы javascript