javascript - 在现有隐藏功能中添加 jQuery 删除确认框

Question

我正在使用隐藏功能，它允许我隐藏页面中的多个元素。

隐藏框是这样的:

<div class="box">
  <a href='javascript:setHide("Element_1")' class="button element_hide">Hide Box 1</a>
</div>
<div class="box">
  <a href='javascript:setHide("Element_2")' class="button element_hide">Hide Box 2</a>
</div>

而 js 是:

    $('.element_hide').click(function() {
      $(this).closest('.box').hide(300);
    });
    function setHide(ObjID) {
      if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
      } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      var p_str = "p="+ObjID;
      xmlhttp.open("POST","/hide/",true);
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      xmlhttp.send(p_str);
    }

现在我想添加一个确认框；如果我点击“隐藏框链接”，我想显示以下消息:“你真的要隐藏框吗？”。所以我尝试将 js 部分更改为:

    $('.element_hide').click(function() {
      $(this).closest('.box').hide(300);
    });
    function setHide(ObjID) {
        if (confirm("Do you really want to hide the box?")) {
          if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
          } else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          var p_str = "p="+ObjID;
          xmlhttp.open("POST","/hide/",true);
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xmlhttp.send(p_str);
        }
    }

但不幸的是，它不起作用，因为即使我点击“取消”(在确认框中)，该框仍然消失。

有什么想法吗？非常感谢!

Answer 1

这是因为您有两个单独的事件处理程序用于隐藏和确认，而用于隐藏的事件处理程序始终运行。第一个事件使用 href='javascript:setHide("Element_1")' 设置，第二个事件使用 jQuery 的 $('.element_hide').click 设置。

将所有内容移动到通用处理程序中:

$('.element_hide').click(function() {
  if (confirm("Do you really want to hide the box?")) {
    var xmlhttp

    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var ObjID = $(this).data('hide');
    var p_str = "p=" + ObjID;
    xmlhttp.open("POST", "/hide/", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(p_str);

    $(this).closest('.box').hide(300);
  }
});

HTML 部分将变为:

<div class="box">
  <a data-hide="Element_1" class="button element_hide">Hide Box 1</a>
</div>
<div class="box">
  <a data-hide="Element_2" class="button element_hide">Hide Box 2</a>
</div>

请注意，如何使用数据属性 (data-hide="Element_1") 将 ObjID 传递给事件处理程序。