如何将多个项目的开关功能输入更改为 class

Question

我有一个有效的 jQuery 函数，它检测输入是否被检查，然后输出通知消息并更新 html 值并通过 php 更新 mysql ajax。在单个页面上一切正常，但我真的不知道如何为页面上的多个项目实现它。这是我在 jQuery.

中得到的

两个站点的结构相同，但我不知道从哪里开始或没有什么好主意。

请随意添加类或其他内容以启动它或添加到运行。

function myFunction(elem) {
  var checkBox = elem;
  if (checkBox.checked == true) {
    $('.alert-box').remove();
    var currentValue = $(".lovecount").text();
    var newValue = +currentValue + 1;
    $(".lovecount").text(newValue);

    var postid = $("#toggle").attr("data-post");
    var userid = $("#toggle").attr("data-userid");
    //get actual ip

    dataString = 'userid=' + userid + '&postid=' + postid;

    $.ajax({
      type: 'POST',
      url: 'inc/give-love.php',
      data: dataString,
      success: function(response) {
      }
    });

    $('<div class="alert-box success" ><i class="fa fa-heart"></i> Liebe gegeben!</div>').prependTo('body').delay(3000).fadeOut(1000, function() {

      $('.alert-box').remove();

    });
  } else {
    $('.alert-box').remove();
    var currentValue = $(".lovecount").text();
    var newValue = +currentValue - 1;
    $(".lovecount").text(newValue);

    var postid = $("#toggle").attr("data-post");
    var userid = $("#toggle").attr("data-userid");
    //get actual ip

    dataString = 'userid=' + userid + '&postid=' + postid;

    $.ajax({
      type: 'POST',
      url: 'inc/give-love.php',
      data: dataString,
      //beforeSend : function(xhr, opts){

      //check ips from db if actual ip exists 

      //if(1 == 2) //if ip already exists for actual post block submit(success) and display message in button like in success
      //{
      //    xhr.abort();
      //    $("a.btn-default.ja").css("border", "#c85555");
      //    $("a.btn-default.ja").css("background", "#7dc85575");
      //    $('a.btn-default.ja').html("Du hast bereits gevoted für dieses Tutorial"); 
      //    $('a.btn-default.nein').hide(); 
      //}
      //else success  
      //},
      success: function(response) {
      }
    });

    $('<div class="alert-box success" ><i class="fa fa-heart-o"></i> Liebe genommen!</div>').prependTo('body').delay(3000).fadeOut(1000, function() {

$('.alert-box').remove();
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-favorite" id="heart-container"><a href="#" title="Alle Loves anzeigen"><span class="lovecount">0</span></a>

  <input data-post="123" data-userid="1" type="checkbox" id="toggle" onclick="myFunction(this)">

  <div id="twitter-heart" class=""></div>
  </input>
</div>

Answer 1

可能是这个意思？

$(".toggle").on("click", function() {
  var $this = $(this);
  var $lovecount = $this.closest("div").find(".lovecount");
  var val = +$lovecount.text() + (this.checked ? 1 : -1);
  $lovecount.text(val)
  $('.alert-box').toggle(!this.checked);

  var postid = $this.attr("data-post");
  var userid = $this.attr("data-userid");
  dataString = 'userid=' + userid + '&postid=' + postid;

  // Are you not supposed to send the new value to the server?

  $.ajax({
    type: 'POST',
    url: 'inc/give-love.php',
    data: dataString,
    success: function(response) {
      $('<div class="alert-box success" ><i class="fa fa-heart"></i> Liebe gegeben!</div>').prependTo('body').delay(3000).fadeOut(1000, function() {
        $('.alert-box').hide();
      });
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-favorite heart-container"><a href="#" title="Alle Loves anzeigen"><span class="lovecount">0</span></a>
  <input data-post="123" data-userid="1" type="checkbox" class="toggle" />

  <div class"twitter-heart"></div>
</div>

如何将多个项目的开关功能输入更改为 class

How to change Input on switch function to class for multiple items

jquery

class

input

onchange