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

Question

我无法让某些通知类型的元素显示和隐藏。 我要完成的是在页面开始处显示两个或多个弹出元素。 然后，当单击一个元素的“ .alert-close”块时，它会缩小并隐藏内容，仅使“ .alert-open”块可见。 然后单击此块，它会重新调整大小并显示内容。 到目前为止，一切正常。 第二个元素相同。 关闭并显示有效。 不是棘手的部分。 当其中一个元素关闭（最小化）时，我无法注册对第二个元素的点击（也将其最小化）。 我想念什么？ 我在每个查询的末尾尝试了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");            
    });

这是最终的且功能全面的代码。 万一有人发现自己处在类似的情况下，也许它将使更容易找到正确的解决方案