Как сделать jquery счетчик go вверх и вниз с помощью нескольких кнопок?

Question

Я использую jquery и AJAX вызов для отправки данных в мое django представление, когда пользователь нажимает кнопку (на странице есть несколько кнопок). Каждый раз, когда пользователь нажимает кнопку (которая соответствует указанной c записи [слово] в таблице), счетчик должен go увеличиваться на единицу, и соответствующее слово должно быть сохранено. Затем я понял, что пользователь может щелкнуть одно и то же слово более одного раза, что испортит данные. Поэтому я изменил его так, чтобы конкретную кнопку можно было нажать только один раз.

Однако затем я понял, что было бы хорошо дать пользователю возможность отменить щелчок, если он случайно нажал кнопку. Итак, теперь я хочу, чтобы счетчик увеличивался на go на единицу, если щелкнул в первый раз и соответствующее слово сохранено, и вниз на единицу (и соответствующее слово удалено), если щелкнуть снова. Я нашел несколько способов сделать это в Интернете, но это только в том случае, если на странице есть только одна кнопка, а у меня их несколько. Я изо всех сил пытаюсь понять, как это сделать для нескольких кнопок.

Кажется, это работает достаточно хорошо, если есть только одна кнопка: { ссылка }

Здесь это мой jquery пытается реализовать это:

$(document).ready(function() {
  var known_words = 0;
  var clicked_words = [];
  var state = true;
  $(".word_known").click(function() {
    if (state) {
    known_words++;
    var reference = this;
    var songpk = $(this).data('songpk');
    var userpk = $(this).data('userpk');

    clicked_words.push($(this).data('word'));
    $.ajax({
      async: false,
      url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
      data: {'known_words': known_words, 'clicked_words': clicked_words},
      success: function(data) {
    $(reference).removeClass("btn-warning");
    $(reference).addClass("btn-success");
    $(reference).text("Known");
    test(data);
    state = false;
  },
      failure: function(data) {
        alert("There is an error!")
      },
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      })
   function test(data){
     console.log(data);
   }
}  else {
  known_words--;
  var reference = this;
  var songpk = $(this).data('songpk');
  var userpk = $(this).data('userpk');

  clicked_words.pop($(this).data('word'));
  $.ajax({
    async: false,
    url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
    data: {'known_words': known_words, 'clicked_words': clicked_words},
    success: function(data) {
  $(reference).removeClass("btn-success");
  $(reference).addClass("btn-known");
  $(reference).text("Да");
  test(data);
  state = true;
},
    failure: function(data) {
      alert("There is an error!")
    },
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    })
 function test(data){
   console.log(data);
 }
}
})
});

Html фрагмент:

<td class='col-1 d-flex align-middle'>
            {% if item.0 in user_flash %}
              <button type="button" class="btn btn-success btn-sm" >Known</button>
            {% elif item.0 in known_words %}
            <button type="button" class="btn btn-success btn-sm" >Known</button>
            {% else %}
            <a href="javascript:" class="word_known btn btn-warning btn-sm" data-word="{{item.0}}" data-songpk="{{song_pk}}" data-userpk="{{user_pk}}">Да</a>
            {% endif %}
         </td>

А вот демонстрация без части AJAX - просто идет от нуля до единицы и обратно. Как я могу реализовать его, чтобы он правильно обрабатывал несколько кнопок?

Демо: https://jsfiddle.net/2mjwcg81/1/

Answer 1

Мне удалось решить это следующим образом:

$(document).ready(function() {
  var known_words = 0;
  var clicked_words = [];
  $(".word_known").click(function() {
    var reference = this;
    var songpk = $(this).data('songpk');
    var userpk = $(this).data('userpk');
    $(this).toggleClass('increment');
    if ($(this).hasClass('increment')) {
    known_words++;
    clicked_words.push($(this).data('word'));
    $.ajax({
      async: false,
      url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
      data: {'known_words': known_words, 'clicked_words': clicked_words},
      success: function(data) {
    $(reference).removeClass("btn-warning");
    $(reference).addClass("btn-success");
    $(reference).text("Known");
    test(data);
  },
      failure: function(data) {
        alert("There is an error!")
      },
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      })
   function test(data){
     console.log(data);
   }}
  else {
  known_words--;
  clicked_words.pop($(this).data('word'));
  $.ajax({
    async: false,
    url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
    data: {'known_words': known_words, 'clicked_words': clicked_words},
    success: function(data) {
  $(reference).removeClass("btn-success");
  $(reference).addClass("btn-warning");
  $(reference).text("Да");
  test(data);
},
    failure: function(data) {
      alert("There is an error!")
    },
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    })
 function test(data){
   console.log(data);
 }
}
})
});