jQuery - 如果/在 window 上调整大小（如何在 jQuery 中绑定 2 个或更多事件）

Question

如果 window <= 479 && hasClass("active") ，则代码会更改.box的background-color 。 问题是当 window 调整大小>=479时else不起作用。

无论是在加载还是在加载后调整 window 的大小，我都希望 else 语句为真，除非满足 if 条件。 换句话说，if语句只有在条件满足时才为真，否则else永远是盒子的真state。

 $(".button").on("click", function() { const dataClose = $(this).attr("data-close"); const elem = $('[data-id="' + dataClose + '"]').length? $('[data-id="' + dataClose + '"]'): $(dataClose); if (elem.hasClass("active") && elem.is(":visible")) { elem.removeClass("active"); } else { const id = $(this).prop("id"); $(".modal").each(function() { $(this).toggleClass("active", $(this).data("id") == id); }); } if ($(window).width() <= 479 && elem.hasClass("apple-modal") && elem.hasClass("active")) { $(".box").css("background", "blue"); } else { $(".box").css("background", ""); } }); $(document).on("click", function(e) { if ( $(".apple-modal, .google-modal").hasClass("active") &&.$(",modal. ,modal *. .button").is(e.target) ) { $(".modal");removeClass("active"); } });

 .box { height: 200px; width: 200px; border: 2px solid; }.buttons { display: flex; align-items: center; }.button { height: 30px; cursor: pointer; border: 2px solid; padding: 1rem; font-size: 28px; } #icon { color: silver; }.header { height: 15px; background: #eee; }.modal { position: fixed; top: 72px; right: 15px; z-index: 6; opacity: 0; visibility: hidden; transform: scale(0.5); transform-origin: top right; transition: 0.15s; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); }.modal:after { content: ""; width: 15px; height: 15px; background: inherit; position: absolute; background: #eee; top: -6px; right: 8px; opacity: 0; visibility: hidden; transform: rotate(45deg) scale(0.5); transition: 0.15s; }.modal.active { opacity: 1; visibility: visible; transform: scale(1); }.modal.active:after { opacity: 1; visibility: visible; transform: rotate(45deg) scale(1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="buttons"> <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" /> <img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" /> <div class="button" id="icon" data-close="icon"> <i class="fas fa-bell"></i> </div> </div> <div class="modal google-modal" data-id="google"> <div class="header">Google</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="modal apple-modal" data-id="apple"> <div class="header">Apple</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="modal icon-modal" data-id="icon"> <div class="header">Icon</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="box"></div>

Answer 1

根据您的要求，您需要检查模态是否在 window 负载和 window 大小小于或等于 479 时处于活动状态，

在这种情况下，您需要绑定这两个事件， window.load和window.resize

检查下面的示例，

$(window).bind("load resize", function() {
    var modalDiv = $('.modal');
    var isModalActive = modalDiv.hasClass('active');
    var windowWidth = $(window).width();
    if(isModalActive && windowWidth <= 479){
       console.log("modal active");
       $(".box").css("background", "blue");
    }else {
       $(".box").css("background", "red");
    }
});

根据您的问题，我已在代码中添加了该事件，我还附加了一个代码笔，以便您可以调整window的大小并检查结果。

根据您的问题和评论，

1. 你的盒子不会有任何背景颜色
2. 如果 window 宽度小于 479 并且模态处于活动状态，则它将为蓝色
3. 如果您调整 window 的大小并且如果它超过 479 则再次没有背景颜色。

如果您需要其他东西，请告诉我，我们将讨论并实现它。

注意：要检查结果，通过打开模态而不打开它来调整 window 的大小，在这两种情况下，还要检查控制台。

Answer 2

因此，如果我正确理解您的问题，您需要以下行为：

1. 在任何时候，如果您的元素 class “apple-modal”处于活动状态，并且 window 宽度小于 479，则将框涂成蓝色。

2. 如果在任何时候调整 window 的大小并且宽度现在 > 479，即使具有 class “apple-modal”的元素仍然处于活动状态，请删除框的背景颜色。

首先让我们重构盒子着色代码。 我们定义了一个 function update_color()将循环遍历每个按钮并检查其对应的元素是否处于活动状态，并且 window 宽度小于 479。如果这些条件中的任何一个为真，我们相应地为框着色并中断循环。 IE

function update_color() {
    $('.button').each(function(i, button) {
        let dataClose = $(button).attr("data-close");
        let elem = $('[data-id="' + dataClose + '"]').length ?
            $('[data-id="' + dataClose + '"]') :
            $(dataClose);
        if ($(window).width() <= 479 && elem.hasClass("apple-modal") && elem.hasClass("active")) {
            $(".box").css("background", "blue");
            return false;
        } else {
            $(".box").css("background", "");
        }
    });
}

接下来，我们在三个点简单地调用update_color() ：

1. 在它被定义之后，使盒子在加载时被适当地着色。 即update_color();

2. 在每个 window 调整大小事件之后，检查框是否应该以不同的颜色着色。 即$(window).on("resize", update_color);

3. 每次单击按钮后，检查活动状态是否已更改。 IE

    $(".button").on("click", function(e) { const dataClose = $(this).attr("data-close"); const elem = $('[data-id="' + dataClose + '"]').length? $('[data-id="' + dataClose + '"]'): $(dataClose); if (elem.hasClass("active") && elem.is(":visible")) { elem.removeClass("active"); } else { const id = $(this).prop("id"); $(".modal").each(function() { $(this).toggleClass("active", $(this).data("id") == id); }); } update_color(); });

总体而言，以下代码片段应产生所需的行为。

 function update_color() { $('.button').each(function(i, button) { let dataClose = $(button).attr("data-close"); let elem = $('[data-id="' + dataClose + '"]').length? $('[data-id="' + dataClose + '"]'): $(dataClose); if ($(window).width() <= 479 && elem.hasClass("apple-modal") && elem.hasClass("active")) { $(".box").css("background", "blue"); return false; } else { $(".box").css("background", ""); } }); } update_color(); $(window).on("resize", update_color); $(".button").on("click", function(e) { const dataClose = $(this).attr("data-close"); const elem = $('[data-id="' + dataClose + '"]').length? $('[data-id="' + dataClose + '"]'): $(dataClose); if (elem.hasClass("active") && elem.is(":visible")) { elem.removeClass("active"); } else { const id = $(this).prop("id"); $(".modal").each(function() { $(this).toggleClass("active", $(this).data("id") == id); }); } update_color(); }); $(document).on("click", function(e) { if ( $(".apple-modal, .google-modal").hasClass("active") &&.$(",modal. ,modal *. .button").is(e.target) ) { $(".modal");removeClass("active"); } });

 .box { height: 200px; width: 200px; border: 2px solid; }.buttons { display: flex; align-items: center; }.button { height: 30px; cursor: pointer; border: 2px solid; padding: 1rem; font-size: 28px; } #icon { color: silver; }.header { height: 15px; background: #eee; }.modal { position: fixed; top: 72px; right: 15px; z-index: 6; opacity: 0; visibility: hidden; transform: scale(0.5); transform-origin: top right; transition: 0.15s; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); }.modal:after { content: ""; width: 15px; height: 15px; background: inherit; position: absolute; background: #eee; top: -6px; right: 8px; opacity: 0; visibility: hidden; transform: rotate(45deg) scale(0.5); transition: 0.15s; }.modal.active { opacity: 1; visibility: visible; transform: scale(1); }.modal.active:after { opacity: 1; visibility: visible; transform: rotate(45deg) scale(1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="buttons"> <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" /> <img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" /> <div class="button" id="icon" data-close="icon"> <i class="fas fa-bell"></i> </div> </div> <div class="modal google-modal" data-id="google"> <div class="header">Google</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="modal apple-modal" data-id="apple"> <div class="header">Apple</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="modal icon-modal" data-id="icon"> <div class="header">Icon</div> <ul> <li> First </li> <li> Second </li> <li> Third </li> </ul> </div> <div class="box"></div>