Jquery 当一个元素被单击x次时隐藏另一个元素

我正试图使.alert父容器（#alerts）仅在单击关闭（X）按钮三次但一次单击就关闭时隐藏。它们是三个警报，可见警报在每次单击时关闭

如果我取出第二个功能，.alerts会在每次单击时按其应该的方式关闭

有没有办法解决这个问题

$（“.alert开关”）。打开（“单击”，函数（）{
$（'.alert box:visible'）.hide（）.next（）.show（）；
});
$（'.alert开关'）。单击（函数（）{
var clickNum=$（this.data（'clickNum'）；
如果（clickNum）clickNum==3；
$（“#警报”）.slideUp（）；
});
。警报框：第一种类型{
显示：块；
}
.警报框，.不再显示{
高度：自动；
宽度：80%；
浮动：左；
位置：相对位置；
填充：10px 0 20px 0；
显示：无；
颜色：#fff；
}
.没有了{
背景色：#29568F；
背景图片：url（images/black twill.png）；
文本对齐：居中；
}
.alert-box.黄色{
背景色：#FCF8E3；
颜色：#D83F26；
}
.alert-box.red{
背景色：#D64024；
颜色：#fff；
}
.alert-box.blue{
背景色：#6EBAEC；
颜色：#fff；
}
.警报左箭头、.警报右箭头{
宽度：5%；
高度：50px；
字体大小：30px；
颜色：#fff；
不透明度：0.60；
光标：指针；
位置：绝对位置；
左：25px；
底部：0；
排名：0；
}
.alert-box.red.警报左箭头、.alert-box.red.警报右箭头、.alert-box.red.警报开关、.alert-box.blue.警报开关{
颜色：#fff；
}
.alert-box.yellow.警报左箭头、.alert-box.yellow.警报右箭头、.alert-box.yellow.警报开关{
颜色：#D83F26！重要；
}
.警报内容{
浮动：左；
宽度：90%；
填充：5px25px 5px25px；
字体重量：较轻；
字号：17px；
}
.警报内容h5{
字体大小：24px；
字体大小：正常；
}
.警报左箭头：悬停，.警报右箭头：悬停，.警报开关：悬停{
不透明度：1；
}
.警报框.警报右箭头{
左：55px；
}
.报警开关{
位置：绝对位置；
右：25px；
顶部：-15px；
字体大小：10px；
字体重量：较轻；
宽度：25px；
高度：13px；
填充：20px0 5px0；
文本对齐：居中；
光标：指针；
z指数：9；
颜色：继承！重要；
-ms边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
不透明度：0.40；
}
.警报开关，.警报计数{
-ms边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
不透明度：0.40；
光标：指针；
}
.red.警报开关，.red.警报计数{
边框：实心1px#fff；
颜色：#fff；
}
.yellow.警报开关，.yellow.警报计数{
边框：实心1px#D64024；
颜色：#D64024；
}
.blue.警报开关，.blue.警报计数{
边框：实心1px#fff；
颜色：#fff；
}
.没有点击{
指针事件：无！重要；
不透明度：0.20；
光标：不允许；
}
/**警报计数CSS**/
.警报计数{
宽度：自动；
最大宽度：80px；
高度：10px；
字体大小：14px；
文本对齐：右对齐；
裕度：0 10px 0 0；
浮动：对；
位置：相对位置；
填充：3px 5px 12px 5px！重要；
}
。警报计数：悬停{
不透明度：1；
}
/**警报导航器样式从这里开始**/
.警报导航器{
宽度：920px；
高度：自动；
浮动：左；
填充：0 25px 5px 25px；
位置：相对位置；
边缘顶部：20px；
}

非常重要的警报！
bzds Lorem ipsum dolor sit amet，是一位杰出的发展精英。从奥古斯都到奥古斯都，从同一个地方到另一个地方，从一个地方到另一个地方。库拉比图尔·夸姆·奥古斯酒店
非常重要的警报！
bzds Lorem ipsum dolor sit amet，是一位杰出的发展精英。从奥古斯都到奥古斯都，从同一个地方到另一个地方，从一个地方到另一个地方。库拉比图尔·夸姆·奥古斯酒店
非常重要的警报！
bzds Lorem ipsum dolor sit amet，是一位杰出的发展精英。从奥古斯都到奥古斯都，从同一个地方到另一个地方，从一个地方到另一个地方。库拉比图尔·夸姆·奥古斯酒店
计算点击次数不是一个好的解决方案。它也是不可重用的，如果不修改JS，就不能添加警报。您还应该注意，在同一元素上绑定两个相同类型的事件是一种不好的做法。你不应该那样做

只需检查是否有警报显示，如：


$（“.alert开关”）。打开（“单击”，函数（）{
var alert=$（'.alert box:visible'）.hide（）.next（）.show（）；
如果（alert.length==0）$（“#alerts”）.slideUp（）；
});
。警报框：第一种类型{
显示：块；
}
.警报框，.不再显示{
高度：自动；
宽度：80%；
浮动：左；
位置：相对位置；
填充：10px 0 20px 0；
显示：无；
颜色：#fff；
}
.没有了{
背景色：#29568F；
背景图片：url（images/black twill.png）；
文本对齐：居中；
}
.alert-box.黄色{
背景色：#FCF8E3；
颜色：#D83F26；
}
.alert-box.red{
背景色：#D64024；
颜色：#fff；
}
.alert-box.blue{
背景色：#6EBAEC；
颜色：#fff；
}
.警报左箭头、.警报右箭头{
宽度：5%；
高度：50px；
var clickNum = 0;
$('.alert-switch').click(function () {
    clickNum++;
    if (clickNum === 3) $("#alerts").slideUp();
});

<div id="close">X</div>
<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo eaque cum placeat aperiam voluptatum error nobis iusto magni excepturi adipisci impedit at fuga dolore cumque fugit pariatur possimus. Minus minima.</div>

var time = 0;                       // Set variable to 0
$('#close').on('click', function(){ // Click event on close btn
    time++;                         // add +1 to time for each click
    if(time === 3){
        time = 0;                   // Reset time to 0 if block reappear
        $('#box').hide();           // Hide Bloc
    }
});

$(document).ready(function() {
    var clicks = 0;  

    $('.alert-switch').on('click', function () {
        clicks++;
        if (clicks == 3) {
            $("#alerts").slideUp();
        }
    });
});