用于多个弹出窗口但在 mouseleave 上触发特定弹出窗口的 JQuery 数据属性答案

【问题标题】：JQuery data attribute used for multiple popups but to trigger a specific one on mouseleave用于多个弹出窗口但在 mouseleave 上触发特定弹出窗口的 JQuery 数据属性
【发布时间】：2018-05-01 13:11:20
【问题描述】：

jquery

function initPopup() {
//----- OPEN
$('[data-popup-open]').on('click', function (e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function (e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
});
}

$(document).ready(function () {
    initPopup();
});

上面是我的 jquery 代码，用于使用属性显示特定的弹出数据。

HTML

<div class="popup" data-popup="popup-1">
        <div class="popup-inner">
            <h2>TEST</h2>
            <p>TEST</p>
            <p>TEST</p>
            <a data-popup-close="popup-1" href="#" class="close">Close</a>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>


<div class="popup" data-popup="popup-2">
            <div class="popup-inner">
             <h2>TEST</h2>
            </div>
        <a data-popup-close="popup-2" href="#" class="close">Close</a>
        <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
    </div>

我希望它在 body 的 mouseleave 事件中显示 data-popup="popup-2"

我对 jquery 很陌生，但喜欢跳入深渊，如果您能够提出更好的方法/不同的方法来做到这一点，我很高兴学习。

感谢您抽出宝贵时间阅读。

乔治

【问题讨论】：

您没有在代码中使用 mouseleave 事件。这里所说的body，是指html body吗？

标签： javascript jquery popupwindow

【解决方案1】：

如果您想要在 html 正文上绑定 mouseleave 事件（我不了解您的用例），您可以执行以下操作：

$("body").on("mouseleave", function() {
  $("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
  $("[data-popup='popup-2']").hide();
});

此代码将重置状态，这意味着当鼠标重新进入正文时它不会保留打开的弹出窗口。如果您想保留状态，一个简单的方法可能是：

var isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("body").on("mouseleave", function() {
  isPopupShown = $"([data-popup='popup-2']").is(":visible");
  $("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
  $("[data-popup='popup-2']").show();
  if (!isPopupShown) {
     $("[data-popup='popup-2']").hide();
  }
});

这段代码会在鼠标离开body的时候显示popup-2，当鼠标在body里面的时候会恢复原来的状态（没测试过，不过就是这么个思路）。

有很多方法可以实现弹出，我个人只使用css（简单的弹出不需要js）用于简单的情况。您可以创建一块可重用的 css 并复制 html 结构：

HTML：

 <label for="foobaz">click here</label>
  <input type="checkbox" class="hide popup-controller" id="foobaz"/>
  <div class="popup" id="popup1">
    <div>foo</div>
  </div>

CSS：

.popup-controller {
  display: none;
}
.popup {
  display: none;
}
.popup-controller:checked + .popup {
  display: block;
}
/** This show the popup if the mouse is out the body **/
body:not(:hover) #popup1.popup {
  display: block;
}

使用这个你可以摆脱 js (associated jsbin)。使用此代码，如果输入被选中或鼠标不在正文中，它将显示弹出窗口。您只需要使用相同的 html 结构就可以对其他弹出窗口产生相同的效果。使用它，您可以在 JS 中使用复选框上的trigger 来控制弹出窗口。

如果您真的很喜欢 JS，我建议您创建一个对象并尽可能少地编写您指定“popup-1”的代码。您可以轻松做到这一点：

$( ".popup" ).on( "click", function( event ) {
  if ($(event.target).is('.close')) {
    $(this).hide();
    event.stopImmediatePropagation();
    event.preventDefault();
  }
});

在这种情况下，即使您的弹出窗口中有很多“关闭”，它也会关闭弹出窗口，而无需指定popup-1（您可以保留您的open 代码）。

【讨论】：

【解决方案2】：

添加到您想在休假时关闭的弹出窗口，另一个数据属性，例如 data-bodyclose （或米特雷名称）。然后在body事件中，检查.popup是否有那个属性，如果为true就关闭它（可能更好的触发data-close-popup子事件）

【讨论】：