当另一个元素被点击 x 次时隐藏一个元素
Hiding one element when the other is clicked x times
我正在尝试让 .alert 父容器 (#alerts) 仅在单击 close(X) 按钮 3 次时隐藏,但它仅在单击一次时关闭点击。它们是三个警报,每次单击都会关闭可见的警报。
如果我去掉第二个函数,.alerts 会在每次点击时关闭。
关于如何解决这个问题有什么想法吗?
$(".alert-switch").on("click", function(){
$('.alert-box:visible').hide().next().show();
});
$('.alert-switch').click(function () {
var clickNum = $(this).data('clickNum');
if (clickNum) clickNum === 3;
$("#alerts").slideUp();
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>
var clickNum = 0;
$('.alert-switch').click(function () {
clickNum++;
if (clickNum === 3) $("#alerts").slideUp();
});
计算点击次数不是一个好的解决方案。它也不可重复使用,并且您不能在不修改 JS 的情况下添加警报。您还应该注意,在同一元素上绑定 2 个相同类型的事件是一种不好的做法。你不应该那样做。
只是检查是否有要显示的警报,例如:
$(".alert-switch").on("click", function(){
var alert = $('.alert-box:visible').hide().next().show();
if(alert.length === 0) $("#alerts").slideUp();
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>
像这样:
html :
<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>
js :
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
}
});
像这样的? http://jsfiddle.net/swm53ran/115/
$(document).ready(function() {
var clicks = 0;
$('.alert-switch').on('click', function () {
clicks++;
if (clicks == 3) {
$("#alerts").slideUp();
}
});
});
试试这个:
$(".alert-switch").on("click", function(){
$('.alert-box:visible').hide().next().show();
});
$('.alert-switch').click(function () {
var clickNum = $('#clickNum').val();
//alert(clickNum);
$('#clickNum').val(parseInt(clickNum) + 1)
//$('#clickNum').val(); = $('#clickNum').val() + 1;
//var clickNum = $(this).data('clickNum');
if (clickNum === 3) {
$("#alerts").slideUp();
}
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis
<input tipe="hidden" value="0" id="clickNum">
</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>
我正在尝试让 .alert 父容器 (#alerts) 仅在单击 close(X) 按钮 3 次时隐藏,但它仅在单击一次时关闭点击。它们是三个警报,每次单击都会关闭可见的警报。
如果我去掉第二个函数,.alerts 会在每次点击时关闭。
关于如何解决这个问题有什么想法吗?
$(".alert-switch").on("click", function(){
$('.alert-box:visible').hide().next().show();
});
$('.alert-switch').click(function () {
var clickNum = $(this).data('clickNum');
if (clickNum) clickNum === 3;
$("#alerts").slideUp();
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>
var clickNum = 0;
$('.alert-switch').click(function () {
clickNum++;
if (clickNum === 3) $("#alerts").slideUp();
});
计算点击次数不是一个好的解决方案。它也不可重复使用,并且您不能在不修改 JS 的情况下添加警报。您还应该注意,在同一元素上绑定 2 个相同类型的事件是一种不好的做法。你不应该那样做。
只是检查是否有要显示的警报,例如:
$(".alert-switch").on("click", function(){
var alert = $('.alert-box:visible').hide().next().show();
if(alert.length === 0) $("#alerts").slideUp();
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>
像这样:
html :
<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>
js :
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
}
});
像这样的? http://jsfiddle.net/swm53ran/115/
$(document).ready(function() {
var clicks = 0;
$('.alert-switch').on('click', function () {
clicks++;
if (clicks == 3) {
$("#alerts").slideUp();
}
});
});
试试这个:
$(".alert-switch").on("click", function(){
$('.alert-box:visible').hide().next().show();
});
$('.alert-switch').click(function () {
var clickNum = $('#clickNum').val();
//alert(clickNum);
$('#clickNum').val(parseInt(clickNum) + 1)
//$('#clickNum').val(); = $('#clickNum').val() + 1;
//var clickNum = $(this).data('clickNum');
if (clickNum === 3) {
$("#alerts").slideUp();
}
});
.alert-box:first-of-type {
display: block;
}
.alert-box, .no-more {
height: auto;
width: 80%;
float: left;
position: relative;
padding: 10px 0 20px 0;
display: none;
color: #fff;
}
.no-more {
background-color: #29568F;
background-image: url(images/black-twill.png);
text-align: center;
}
.alert-box.yellow {
background-color: #FCF8E3;
color: #D83F26;
}
.alert-box.red {
background-color: #D64024;
color: #fff;
}
.alert-box.blue {
background-color: #6EBAEC;
color: #fff;
}
.alert-left-arrow, .alert-right-arrow {
width: 5%;
height: 50px;
font-size: 30px;
color: #fff;
opacity: 0.60;
cursor: pointer;
position: absolute;
left: 25px;
bottom: 0;
top: 0;
}
.alert-box.red .alert-left-arrow, .alert-box.red .alert-right-arrow, .alert-box.red .alert-switch, .alert-box.blue .alert-switch {
color: #fff;
}
.alert-box.yellow .alert-left-arrow, .alert-box.yellow .alert-right-arrow, .alert-box.yellow .alert-switch {
color: #D83F26!important;
}
.alert-content {
float: left;
width: 90%;
padding: 5px 25px 5px 25px;
font-weight: lighter;
font-size: 17px;
}
.alert-content h5 {
font-size: 24px;
font-weight: normal;
}
.alert-left-arrow:hover, .alert-right-arrow:hover, .alert-switch:hover {
opacity: 1;
}
.alert-box .alert-right-arrow {
left: 55px;
}
.alert-switch {
position: absolute;
right: 25px;
top: -15px;
font-size: 10px;
font-weight: lighter;
width: 25px;
height: 13px;
padding: 20px 0 5px 0;
text-align: center;
cursor: pointer;
z-index: 9;
color: inherit!important;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
}
.alert-switch, .alert-count {
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.40;
cursor: pointer;
}
.red .alert-switch, .red .alert-count {
border: solid 1px #fff;
color: #fff;
}
.yellow .alert-switch, .yellow .alert-count {
border: solid 1px #D64024;
color: #D64024;
}
.blue .alert-switch, .blue .alert-count {
border: solid 1px #fff;
color: #fff;
}
.no-clicks {
pointer-events: none!important;
opacity: 0.20;
cursor: not-allowed;
}
/** Alert Count CSS **/
.alert-count {
width: auto;
max-width: 80px;
height: 10px;
font-size: 14px;
text-align: right;
margin: 0 10px 0 0;
float: right;
position: relative;
padding: 3px 5px 12px 5px!Important;
}
.alert-count:hover {
opacity: 1;
}
/** Alert Navigator Styling starts here **/
.alert-navigator {
width: 920px;
height: auto;
float: left;
padding: 0 25px 5px 25px;
position: relative;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alerts">
<div class="alert-box red">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box yellow">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
<div class="alert-box blue">
<div class="alert-switch"> <i class="fa fa-times"></i>
</div>
<!-- End Alert Switch -->
<div class="alert-content">
<h5>Very important alert!</h5>
bzds Lorem ipsum dolor sit amet, consectetuv sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis
<input tipe="hidden" value="0" id="clickNum">
</div>
<!-- End Alert Content -->
<div class="alert-navigator">
<div class="alert-left-arrow"><i class="fa fa-angle-left"></i>
</div>
<!-- End Left Arrow -->
<div class="alert-right-arrow"><i class="fa fa-angle-right"></i>
</div>
<!-- End right Arrow -->
<div class="alert-count"></div>
<!-- End Alert Count -->
</div>
<!-- End Alert Nagigator -->
</div>
<!-- End Alert Box -->
</div>