jQuery 切换不同的属性并应用 ajax

Question

我正在使用这个 jQuery 插件来制作切换，但我有一个问题，当我制作多个具有相同 ID 和 class 的切换时，所以在那种情况下我无法识别用于在更改值时应用自动加载 ajax 的特定切换。我想问一下我如何使用相同的插件但不同的 id 或 class 或名称进行相同的切换，所以我使 ajax 的功能就像我单击切换时一样，它将在 PHP 中更新而不提交提交按钮。

我使用的插件是this one

我使用的代码是这样的：

HTML

<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>

脚本

<script>
    $('.easyswitch').easyswitch();
</script>

AJAX

$('MY_CLASS_NAME').change(function(){
    var mode= $(this).prop('checked');
    $.ajax({
      type:'POST',
      dataType:'JSON',
      url:'test.php',
      data:'mode='+mode,
      success:function(data)
      {
        $("body").html('Operation Saved');
      }
});

Answer 1

你无法处理easyswitch's change event。您需要创建它的 click event，然后您可以从中获取当前切换的状态。

    $('.easyswitch').easyswitch();

    $('.easyswitch').click(function () {

        var mode = $(this).hasClass('on');
        toogleStatus(mode);
    });

    // for all controlls.
    $(".easyswitch").each(function() {

       var mode = $(this).hasClass('on');
       toogleStatus(mode);

    });

   function toogleStatus(mode)
   {

       if (!mode) {
            alert('checked')
        }
        else {
            alert('unchecked')
        }
   }

Answer 2

尝试使用 callback 选项

$('.easyswitch').easyswitch({
  callback: function(val, ele) {
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      url: 'test.php',
      data: { mode: val },
      success: function(data) {
        $("body").html('Operation Saved');
      }
    });
  }
});

jQuery 切换不同的属性并应用 ajax

jQuery toggle with different attributes and apply ajax

html

php

ajax

jquery

toggle