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

时间：2015-01-16 15:48:22

标签： jquery jquery-click-event

我试图让 .alert 父容器（#alerts）仅在单击关闭（X）按钮3次时隐藏，但只需单击一下即可关闭。他们发出三次警报，每次点击都会关闭可见警报。

如果我取出第二个功能， .alerts 会在每次点击时关闭。

关于如何解决这个问题的任何想法？

＆＃13;
＆＃13; 
  
$(".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();
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

var clickNum = 0;
$('.alert-switch').click(function () {
    clickNum++;
    if (clickNum === 3) $("#alerts").slideUp();
});

答案 1 :(得分：1)

计算点击次数不是一个好方法。它也不是可重复使用的，您无法在不修改JS的情况下添加警报。您还应该注意，在同一元素上绑定相同类型的2个事件是一种不好的做法。你不应该这样做。

相反，只需检查是否有要显示的提醒，例如：

＆＃13;
＆＃13; 
$(".alert-switch").on("click", function(){
  var alert = $('.alert-box:visible').hide().next().show();
  if(alert.length === 0) $("#alerts").slideUp();
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

这样的事情：

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
    }
});

DEMO：http://jsfiddle.net/h6r8h6se/3/

答案 3 :(得分：1)

这样的事情？ http://jsfiddle.net/swm53ran/115/ 

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

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

答案 4 :(得分：0)

试试这个：

＆＃13;
＆＃13; 
$(".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();
    }
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题