Question

我无法相应地显示和隐藏某些通知类型元素。我想要实现的是在页面开始时显示两个或更多弹出元素。然后点击一个元素＆＃34; .alert-close＆＃34;阻止，它收缩并隐藏内容，只留下＆＃34; .alert-open＆＃34;块可见。然后单击此块，它会调整大小并显示内容。到目前为止这么好，这个工作。同样适用于第二个要素。关闭并显示它的工作原理。不是因为棘手的部分。当其中一个元素关闭（最小化）时，我无法在第二个元素上注册点击（也最小化这个元素）。我错过了什么？我在每个查询结束时尝试了e.preventDefault（）和e.stopPropagation（），没有帮助。我需要能够在任意数量的类似事件上注册点击。

但是，还有.alert-kill块，当第一个元素被模仿时，可以单击该块并在第二个元素上工作。

第二个问题，我怎么能自动化这个，而不需要为两个或更多相似的元素编写相同的js，只有不同的id？（下面的代码是我的测试代码，显然用id为每个元素编写js是不正确的，但由于它们具有相同的类，我不能单独使用这些类来检测click事件，因为它将更改应用于所有元素，我只是现在使用两个ID来测试两个元素的功能）

编辑：删除了ID并仅使用了类。代码现在看起来像这样：

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div class="alert-container">
    <div id="alert-offer" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
           CONTENT 1
        </div>        
    </div>

    <div id="alert-event" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
            CONTENT 2
        </div>        
    </div>
</div>


<script>
var state = "open" ;
$(".alert-container").on("click", ".alert-popup .alert-close", function(e){    
    e.preventDefault();
    if (state !== "open")
        return;

    var $container = $(".alert-popup");            
    var $content = $(".alert-popup .content-row");

    $container.css({
        "right": "-270px",
        "height": "40px",
        "transition": "all 1s ease 0s"
    });
    $content.css({
        "transform":"scale(.5)",
        "transform-origin":"0 0",
        "transition": "all 1s ease 0s"
    });

    state = "close";
    $(e.currentTarget).addClass("hide");            
    $(".alert-popup .alert-open").removeClass("hide");
});

$(".alert-container").on("click", ".alert-popup .alert-open", function(e){    
    var state = "close";
    e.preventDefault();
    if (state === "open")
        return;
    var $container = $(".alert-popup");
    var $content = $(".alert-popup .content-row");
    $container.css({
        "right": "0px",
        "height": "80px",
        "transition": "all 1s ease 0s"
    });
    $content.css({
        "transform":"scale(1)",
        "transition": "all 1s ease 0s"
    });
    state = "open";
    $(e.currentTarget).addClass("hide");
    $(".alert-popup .alert-close").removeClass("hide");
});

$(".alert-container").on("click", ".alert-popup .alert-kill", function(e){            
    $(".alert-popup").css("display","none");            
});
</script>

Answer 1

$(".alert-container").on("click", ".alert-popup .alert-close", function(e){           
        var state = "open" ;
        e.preventDefault();
        if (state !== "open")
            return;

        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");    
        var $alert = $container.find(".alert-open");        
        $container.css({
            "right": "-270px",
            "height": "40px",
            "transition": "all 1s ease 0s"
        });
        $content.css({
            "transform":"scale(.5)",
            "transform-origin":"0 0",
            "transition": "all 1s ease 0s"
        });

        state = "close";
        $(e.currentTarget).addClass("hide");            
        $($alert).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-open", function(e){            
        var state = "close" ;
        e.preventDefault();
        if (state === "open")
            return;
        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");
        var $alert = $container.find(".alert-close");
        $container.css({
            "right": "0px",
            "height": "80px",
            "transition": "all 1s ease 0s"
        });
        $content.css({
            "transform":"scale(1)",
            "transition": "all 1s ease 0s"
        });
        state = "open";
        $(e.currentTarget).addClass("hide");
        $($alert).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-kill", function(e){  
        var $container = $(e.target).closest(".alert-popup");
        $($container).css("display","none");            
    });

这是最终且功能齐全的代码。如果有人发现自己处于类似的情况，也许它会更容易找到正确的解决方案

具有类似行为的第二个元素上的JS click事件不会触发

1 个答案: