0

I'm trying to get the .alert parent container(#alerts) to hide only when the close(X) button is clicked 3 times but it closes on a single click. They're three alerts and the visible one closes at each click.

If I take out the second function, the .alerts closes at each click as it should.

Any ideas on how I can solve this problem?

  
$(".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>
Sleek Geek
  • 4,638
  • 3
  • 27
  • 42

5 Answers5

1
var clickNum = 0;
$('.alert-switch').click(function () {
    clickNum++;
    if (clickNum === 3) $("#alerts").slideUp();
});
Rafael
  • 7,605
  • 13
  • 31
  • 46
1

Calculating the number of click is not a good solution. It is also not reutilisable and you can't add alerts without modifying the JS. You should note as well that binding 2 events of the same type on the same element is a bad practice. You shouldn't do that.

Just check, instead, if there's an alert to show, like that :

$(".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>
Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
  • @SleekGeek And if there is least than 3 alerts? This code will still work. You should always think about re-utilisability and (almost) never hardcode values. I'm just giving you advices. Other answers show you what's wrong with your code. Anyway, I'm sure your answer is in this page so good luck with your project :) – Karl-André Gagnon Jan 16 '15 at 16:10
  • @SleekGeek You could, and it's actually what this code is doing. If `.next` return nothing, then it will hide the pop up. But, you could, if you want, use a condition like this `if(clickNum === $('.alert-box').length)`. – Karl-André Gagnon Jan 16 '15 at 16:20
1

Something like this :

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/

Joffrey Maheo
  • 2,919
  • 2
  • 20
  • 23
1

something like this? http://jsfiddle.net/swm53ran/115/

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

    $('.alert-switch').on('click', function () {
        clicks++;
        if (clicks == 3) {
            $("#alerts").slideUp();
        }
    });
});
indubitablee
  • 8,136
  • 2
  • 25
  • 49
0

Try this:

$(".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>
JuanSedano
  • 1,025
  • 8
  • 14