jQuery 在使用 jQuery 更改后查找更改的属性值

Question

我不知道我的做法是否正确。但我想做的是以下内容。

我有一个菜单，用户可以通过点击 menuhead 按钮打开和关闭购买。我想要的是将打开或关闭的状态保存到我的数据库中，以便当用户刷新页面或再次登录时，菜单状态按预期打开或关闭。

下面的html按钮有一个属性

data-menustatus="<?php echo $showam; ?>"

其中存储了数据库中菜单项的状态值。 1 表示打开，0 表示关闭。

<button class="btn-toggle hass-menuhead align-items-center collapsed MenuStatus" type="button" data-menuitem="accounts" data-menustatus="<?php echo $showam; ?>" data-bs-toggle="collapse" data-bs-target="#Accounts-collapse" data-bs-display="static" aria-expanded="true">
          Accounts Menu
</button>

当用户单击按钮时，我获取该值并将其写入数据库并使其检查 1 或 0，并根据结果存储 1 或 0。我使用 jQuery 来更改data-menustatus="<?php echo $showam; ?>" 为 1 或 0，具体取决于原始数字。当我检查控制台时，当原始数据为 0 时，我看到它按预期更改为 1。

现在是问题。当我再次单击同一个按钮时，它现在应该显示为 1，因为这是 jQuery 更改并显示在控制台中的值。但是 jQuery 仍然在寻找原来的 0 而不是新的 1 值。

我不是 jQuery 方面的专家，我在下面的脚本中尝试过。我究竟做错了什么？我这不可能吗？欢迎大家帮忙！

$(document).on("click", ".MenuStatus", function () {
var MenuStatus = $(this).data("menustatus");
var MenuItem = $(this).data("menuitem");

if(MenuStatus == 1) {
    $(this).attr('data-menustatus','0');
} else {
    $(this).attr('data-menustatus','1');
}
console.log(MenuStatus);

$.ajax({
type: "POST",
url: "../menu/SetMenuFilters.php",
data: {MenuStatus: MenuStatus,MenuItem: MenuItem},
success: function(data) {
},

error: function(xhr, status, error) {
 if(xhr.status&&xhr.status==401){
p.error('Session is broken, login again.'); 
setTimeout(window.location.reload.bind(window.location), 4000);
}else{
alert("Something went wrong, try again later."); 
       } }
});
});

Answer 1

data()的第二个参数取新值。试试这个：

$(document).on("click", ".MenuStatus", function () {
  var MenuStatus = $(this).data("menustatus");
  var MenuItem = $(this).data("menuitem");

  if (MenuStatus == 1) {
    $(this).data('menustatus', '0');
  } else {
    $(this).data('menustatus', '1');
  }
  console.log(MenuStatus);
  $.ajax({
    type: "POST",
    url: "../menu/SetMenuFilters.php",
    data: {
      MenuStatus: MenuStatus,
      MenuItem: MenuItem
    },
    success: function (data) {},

    error: function (xhr, status, error) {
      if (xhr.status && xhr.status == 401) {
        p.error('Session is broken, login again.');
        setTimeout(window.location.reload.bind(window.location), 4000);
      } else {
        alert("Something went wrong, try again later.");
      }
    }
  });
});

简而言之，原因是 jQuery 处理 data 与 HTML 属性分开。您实际上可以存储调用 .data() 的整个对象，而不会对浏览器造成 DOM 更新压力。

文档：
https://api.jquery.com/data/

jQuery 在使用 jQuery 更改后查找更改的属性值

jQuery find changed attribute value after changing it with jQuery

javascript

jquery