Как сделать кнопку с одним кликом +1, вторым кликом -1 и т.д

я здесь новичок

у меня есть этот код

<div class = "like-buttons">
    <div class = "liked"></div><button class = "dislike like"><span class = "countl">12</span></button>
</div>

https://codepen.io/Void0000/pen/oNzGmGr

и мне нужно сделать (с помощью jQuery) некоторую функцию, чтобы, когда я нажимаю на свою кнопку, она считалась +1 (например: если было 2, она становится 3), и когда я снова нажимаю на нее, она будет считаться -1 (например: если было 3, теперь становится 2) и т. д.

про какую кнопку ты говоришь? dislike или dislike like?

— 24.12.2020 04:50

jquery button increment decrement

24.12.2020 04:00

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

146

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Установите прослушиватели событий в классах с помощью jQuery. Нравиться -

$('.like').onclick(function(){
     let like = $(this). closest('.countd').html();
     like = like + 1;
});

Сделайте то же самое для кнопки не нравится.

Извините, я написал, что у меня две кнопки, это ошибка, у меня только 1 кнопка, поэтому мне нужна эта функция только для одной кнопки. Итак, я нажимаю один раз на кнопку +1, я нажимаю еще раз на эту кнопку -1 и т. д. <только 1 кнопка

— 24.12.2020 05:31

24.12.2020 04:13

Согласно ответу #Shivam, вы можете добавить к своей кнопке класс "clicked", если у нее нет этого класса. Если у него есть этот класс, вам нужно удалить класс из него. Пока вы проверяете класс или нет, вы можете увеличить лайк или дискретность.

— 24.12.2020 08:43

24.12.2020 06:56

Ответ принят как подходящий

Согласно ответу @Shivam, вы можете изменить это так;

$('.like').onclick(function(){
     let like = $(this).closest('.countd').html();
     if ($(this).hasClass("clicked")){
         $(this).removeClass("clicked");
         like++;
     }
     else{
         $(this).addClass("clicked");
         like--;
     }
     $(this).closest('.countd').html(like)
});

Можете проверить эту Ссылку. Я внес некоторые изменения.

$(document).ready(function() {
   $('.like').click(function() {
       let like = parseInt($('.countl').html());
       if ($(this).hasClass("clicked")) {
           $(this).removeClass("clicked");
           like++;
       } else {
           $(this).addClass("clicked");
           like--;
       }
       $('.countl').html(like)
   });
});

24.12.2020 08:47

К сожалению, все не работает =(

Можешь еще раз проверить мой ответ? Я обновил и протестировал его. Раньше были ошибки. Я не проверил это хорошо.

— 25.12.2020 15:35

24.12.2020 10:05