具有不同属性的jQuery切换并应用ajax答案

【问题标题】：jQuery toggle with different attributes and apply ajax具有不同属性的jQuery切换并应用ajax
【发布时间】：2019-11-14 04:14:51
【问题描述】：

我正在使用这个 jQuery 插件来制作切换，但是我有一个问题，当我制作具有相同 id 和类的多个切换时，所以在这种情况下，我无法识别特定切换以在更改值时应用自动加载 ajax . 我想问一下我如何使用同一个插件但不同的 id 或类或名称进行相同的切换，所以我制作 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');
      }
});

【问题讨论】：

标签： php jquery html ajax toggle

【解决方案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')
        }
   }

【讨论】：

如果我有多个切换，我会怎么做？
@ShubhamSingh，以上代码适用于所有工具。
但我希望按 id 工作，当我使用切换 html 时，它都有相同的类和 id 我如何使这个分开？
$(this).hasClass('on') 这将为您提供当前单击切换的值，如果您想获得所有easyswitch 切换值，您可以查看我更新的代码

【解决方案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');
      }
    });
  }
});

【讨论】：

如果我有多个切换，我会怎么做？
适用于所有easyswitch。如果你只想要一个，你可以使用id 而不是类
但我希望按 id 工作，当我使用切换 html 时，它都有相同的类和 id 我如何使这个分开？
您在询问与当前问题/答案无关的内容。我希望这里提供的答案足以解决这个问题。