时间戳

首页 > 解决方案 > 当我在警报提示中单击“否”时，切换开关返回到以前的状态

javascript - 当我在警报提示中单击“否”时，切换开关返回到以前的状态

问题描述

我创建了一个开关切换，允许系统管理员激活/停用帐户的登录访问。

管理员单击开关切换（开关从状态 1 移动到 0）后，它将通过警报框提示确认（您要激活/停用此帐户吗？是 | 否），每当我单击“否”时，我希望它返回到之前的状态（从 0 到 1）。

如果状态为“1”[帐户已激活]，我设法成功执行此操作，但是当它相反时，从状态 0 到 1，开关切换不会返回到以前的状态并卡住状态 1。

它仍然会发送正确的 POST 命令（例如，如果帐户被激活则停用帐户，反之亦然），但视觉显示是错误的。

这是我的代码。

用于拨动开关的 Javascript


var chk;
    $(document).on('change', '.btn-change-status', function(e) {
      e.preventDefault();
      chk = $(this);
      var switch_status = $(this).attr('data-status');
      var account_status = (switch_status == 1) ? 0 : 1;
      var id  = $(this).attr('data-id');
      var confirm_alert = (switch_status == 1) ? confirm("Are you sure you want to deactivate this account?") : confirm("Are you sure you want to activate this account?");
        if (confirm_alert == true) {
         $.ajax({
              url: "/user/update-status",
              type: "POST",
              data: {
                _token: "{{csrf_token()}}",
                id: id,
                status: account_status
              },
              success: function(data) {
                if (data.success === true) {
                  alert("Account Successfully Updated!");
                  location.reload();
                }
              }

            });
        }
        else {
          if(chk.checked) {
            chk.prop("checked", false);
          }
          else {
            chk.prop("checked", true);
          }
        }
    });

编辑：添加了开关的 HTML 部分，虽然它仍然在 javascript 中，因为我将它附加到数据表中。

数据表的 HTML


 <div class="card mb-3">
            <div class="card-header">
              <i class="fas fa-table"></i>
              Accounts Management</div>
            <div class="card-body">

              <button type="button" id="btn-add-account" class="btn btn-primary">Add Account</button>
              <div class="table-responsive mt-3">
                <table class="table table-bordered dt-responsive" id="table-accounts" width="100%" cellspacing="0">
                  <thead>
                    <tr>
                      <th class="hidden">ID</th>
                      <th>Username</th>
                      <th>Email</th>
                      <th>Role</th>
                      <th>Date Created</th>
                      <th style="width: 15.5%">Actions</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th class="hidden">ID</th>
                      <th>Username</th>
                      <th>Email</th>
                      <th>Role</th>
                      <th>Date Created</th>
                      <th style="width: 15.5%">Actions</th>
                    </tr>
                  </tfoot>
                  <tbody>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>
        <!-- /.container-fluid -->
      </div>

数据表的 Javascript


$(document).ready(function() {
    getRoles();
    var accounts;
     $('#account-management').addClass('active');

    accounts = $("#table-accounts").DataTable({
        ajax: {
          url: "/users/get-all-users",
          dataSrc: ''
        },
        responsive:true,
        "order": [[ 7, "desc" ]],
        columns: [
        { data: 'id'},
        { data: 'username' },
        { data: 'email'},
        { data: 'role.id'},
        { data: 'created_at'},
        { data: null,
          render: function ( data, type, row ) {
            var html = "";
            if (data.status == 1) {
              html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'" checked> <label for="'+data.id+'"></label></span>';
            } else {
              html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'"> <label for="'+data.id+'"></label></span>';
            }
              html += "<button type='button' class='btn btn-primary btn-sm btn-edit-account mr-2' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button>";
              html += "<button type='button' class='btn btn-secondary btn-sm btn-reset-password' data-id='"+data.id+"' data-account='"+data.id+"'><i class='fas fa-key'></i></button>";

            // <button type='button' class='btn btn-primary btn-sm btn-edit' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button> 
            // html += "<button class='btn btn-danger btn-sm btn-delete' data-id='"+data.id+"' data-account='"+data.id+"'>Remove</button>";

            return html;
          } 
        },
        ],
        columnDefs: [
        { className: "hidden", "targets": [0]},
         { "orderable": false, "targets": 4 }
        ]
    });

谢谢！

标签： javascriptjqueryhtml

解决方案

您能否用您的 HTML 更新您的帖子，因为我不确定问题中描述的情况。我知道为什么代码不起作用，但需要查看 HTML 以进一步调查。事后看来，我意识到我的解决方案可能无法解决问题。

如果带有类的元素是HTMLbtn-change-status中的标签，那么 jQuery将不起作用（你的函数在哪里）。根据 jQuery 文档：<button>.on("change", handler)handler

当元素的值发生变化时，该change事件被发送到元素。此事件仅限于<input>元素、<textarea>框和<select>元素。

相反，我建议使用以下方法之一：

  • .on("click", handler)
  • .on("mouseup", handler)
  • .on("mousedown", handler)

看看哪一个有效。

推荐阅读