how to make count on click and uncount in double click in jquery

时间：2016-04-15 11:15:38

标签： jquery html css

I'm working in jquery i have done a counter but still has some problems when is on click it works but if i make double click in one item the counter still increase, so how can a menage my condition to be like to count the item in click but uncount in unclik

here is my code so far:http://codepen.io/xhepigerta/pen/GZxVmm thanks 

$(document).ready(function() {
	var count=4;
	
   $( ".category-item-image" ).on("click", function(event){
   	 $(this).find('a').toggleClass( "checked" );
 $(this).find('.overaly,.checked-box').toggleClass( "checked" );
 
  $('.topic-picker').css( "opacity", "1" );

  if(count>0){
    
   $("#counter").html("zgjidh edhe <span>"  +count+  "</span> per te vazhduar ");
   
    count--;
   return false;
  }else{
  	$('#counter').css( "opacity", "0" );

  	$('.topic').addClass('topic-piker-right');
  
  
  }
  
});

   
});
.caterory{
  position: relative;
  width: 100%;
  padding: 100px 0;
}


.category-content{
  position: relative;
  width:54%;
  margin: 0 auto;
}


.category-about{
  text-align: center;

}

.category-about h1{
  font-family: 'gothamrnd-light';
  font-size: 2.5rem;
  font-weight: 100;
}

.category-about p{
  font-family: 'open sans';
  font-size: 1.5rem;
  font-weight: 100;
}

.category-content-image{position: relative;width: 100%;list-style: none;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;-webkit-justify-content: center;justify-content: center;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}

.category-item{
  width:220px;
  height:160px;
  margin: 10px 10px 0 0;
 
  overflow: hidden;
}

.category-item-image{
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: transform 125ms ease-out;
  transform: scale(1, 1);
}

.category-item-image:hover{
   transform: scale(1.05, 1.05);
  
}

.category-item-image a{
  position: absolute;
  text-decoration: none;
  color: #000;
  width: 120px;
  height: 34px;
  line-height: 34px;
  left: 50%;
  margin-left: -60px;
  top: 50%;
  margin-top: -17px;
  background-color: #fff;
  vertical-align: middle;
  font-family: 'gothamrnd-book';
  font-weight: 900;
}

.checked-box{
  position: absolute;
  width: 40px;
  height: 100%;
  background-color: #1abc85;
  right: -40px;
  top: 0;
  opacity: 0;
  text-transform:opacity, 250ms, easy-in-out;
}

.checked-box span{
    position: absolute;
    text-align: left;
    top: 50%;
    margin-top: -15px;
    left: 50%;
    margin-left: -15px;
}


.overaly{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(9, 21, 16, 0.69);
  border-radius: 5px;
  opacity: 0;
}
.overaly.checked,.checked-box.checked{
  opacity: 1;
}


.category-item-image a.checked{
  height: 42px;
  margin-left: -80px;
  margin-top: -21px;
  line-height: 42px;
  color: #1ABC85;
}



.topic-picker{
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1abc85;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 90px;
  opacity: 0;
}

.topic-picker-content button{
    background-color: #fff;
    border: 0;
    outline: none;
    color: #000;
    padding: 15px 30px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    position: relative;
    font-family: 'gothamrnd-book';
    font-weight: 900;
    font-size: 1.1rem;
    color: #1ABC85;
}

.topic-picker-content button span{
    position: absolute;
    width: 30px;
    right: 0;
}

#counter{
  position: absolute;
  top: 33%;
}

#counter span{
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  color: #000;
  line-height: 30px;
  padding: 10px 16px;
  margin: 0 5px;
}

.topic{
  opacity: 0;
}

.topic.topic-piker-right{
  opacity: 1;
}

.continue-arrow{
    position: absolute;
    width: 40px;
    height: 100%;
    background-color: #f0f0f0;
    right: -40px;
    top: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.continue-arrow span{
    position: absolute;
    width: 20px;
    right: 0;
    line-height: 85px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-content-image">
  
 <div class="category-item">
               <div class="category-item-image" style="background-image:url('http://blogs-images.forbes.com/ellenhuet/files/2014/11/travis-e1416346466418.jpg');">
                   <div class="overaly"></div>
                   <a href="#">Fotografi<div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#08E8AE" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#fff" fill="#fff" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
   <div class="category-item">
               <div class="category-item-image" style="background-image:url('http://blogs-images.forbes.com/ellenhuet/files/2014/11/travis-e1416346466418.jpg');">
                   <div class="overaly"></div>
                   <a href="#">Fotografi<div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#08E8AE" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#fff" fill="#fff" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
   <div class="category-item">
               <div class="category-item-image" style="background-image:url('http://blogs-images.forbes.com/ellenhuet/files/2014/11/travis-e1416346466418.jpg');">
                   <div class="overaly"></div>
                   <a href="#">Fotografi<div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#08E8AE" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#fff" fill="#fff" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
   <div class="category-item">
               <div class="category-item-image" style="background-image:url('http://blogs-images.forbes.com/ellenhuet/files/2014/11/travis-e1416346466418.jpg');">
                   <div class="overaly"></div>
                   <a href="#">Fotografi<div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#08E8AE" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#fff" fill="#fff" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
        <div class="category-item">
               <div class="category-item-image" style="background-image:url('http://blogs-images.forbes.com/ellenhuet/files/2014/11/travis-e1416346466418.jpg');">
                   <div class="overaly"></div>
                   <a href="#">Fotografi<div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#08E8AE" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#fff" fill="#fff" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
        
  </div>

<div class="topic-picker">
      <div class="topic-picker-content">
      <div class="topic">
       <span>Zgjedhje te shkelqyer! Vazhdoni te zgjidhni me shume kategori ose vazhdoni te lexoni</span>
       <button class="button topic-picker-done-button" label="Done" data-reactid=".0.4.$/picker.0.5.1">Lexo Buletinin<div class="continue-arrow"><span><svg fill="#1ABC85" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M84.6,53.247c0.066-0.089,0.129-0.181,0.189-0.272c0.056-0.085,0.109-0.17,0.161-0.256c0.054-0.092,0.104-0.185,0.154-0.278  c0.048-0.092,0.095-0.185,0.138-0.278c0.043-0.092,0.083-0.184,0.12-0.277c0.04-0.099,0.078-0.197,0.113-0.297  c0.032-0.093,0.062-0.186,0.09-0.279c0.03-0.103,0.059-0.205,0.084-0.309c0.022-0.095,0.043-0.189,0.062-0.284  c0.02-0.104,0.038-0.208,0.054-0.313c0.014-0.097,0.024-0.193,0.034-0.29c0.01-0.104,0.018-0.208,0.022-0.312  c0.005-0.099,0.007-0.198,0.007-0.298c0-0.102-0.002-0.205-0.007-0.307c-0.005-0.101-0.013-0.202-0.022-0.302  s-0.021-0.201-0.035-0.302c-0.015-0.1-0.032-0.2-0.052-0.3s-0.04-0.2-0.064-0.299c-0.023-0.098-0.051-0.194-0.079-0.291  c-0.03-0.101-0.062-0.201-0.096-0.3c-0.032-0.092-0.067-0.183-0.104-0.273c-0.041-0.103-0.084-0.204-0.131-0.305  c-0.039-0.084-0.081-0.167-0.124-0.249c-0.055-0.104-0.111-0.207-0.172-0.309c-0.045-0.075-0.092-0.149-0.14-0.223  c-0.068-0.104-0.14-0.207-0.214-0.308c-0.051-0.068-0.104-0.135-0.157-0.202c-0.081-0.101-0.164-0.198-0.252-0.294  c-0.028-0.031-0.052-0.064-0.081-0.095l-21.09-22.264c-2.406-2.539-6.415-2.647-8.955-0.242c-2.539,2.406-2.646,6.415-0.241,8.954  l10.964,11.573H17.834c-3.498,0-6.333,2.835-6.333,6.333s2.835,6.334,6.333,6.334h46.941L53.812,67.408  c-2.405,2.539-2.298,6.547,0.242,8.953c2.539,2.406,6.548,2.297,8.954-0.242l21.09-22.264c0.034-0.036,0.063-0.076,0.097-0.112  c0.076-0.085,0.149-0.17,0.22-0.258C84.479,53.407,84.54,53.328,84.6,53.247z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"></text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"></text></svg></span></div></button>
       </div>
      <div id="counter"><span>0</span></div>
      </div>
    </div>

4 个答案:

答案 0 :(得分：1)

请试试这个

<script>
$(document).ready(function() {
    var count=5;
   $( ".category-item-image" ).on("click", function(event){
         $(this).find('a').toggleClass( "checked" );
        $(this).find('.overaly,.checked-box').toggleClass( "checked" );

         $('.topic-picker').css( "opacity", "1" );
        var chkCount =$(".category-item .category-item-image a.checked").length;
        //alert(chkCount)
        if(chkCount >= count)
        {
            $('#counter').css( "opacity", "0" );

            $('.topic').addClass('topic-piker-right');

        }
        else{

        $("#counter").html("zgjidh edhe <span>"  +(parseInt(count) - parseInt(chkCount))+  "</span> per te vazhduar ");
   $('#counter').css( "opacity", "1" );
        $('.topic').removeClass('topic-piker-right');
        }
    });


});</script>

答案 1 :(得分：0)

使用click事件来增加计数器

$( ".category-item-image" ).on("click", function(event){
count++ // will increase counter});

使用dblclick事件来减少计数器

$( ".category-item-image" ).on("dblclick", function(event){
count-- // will decrease counter});

答案 2 :(得分：0)

简单来说，您可以在两个不同的事件中调用两个函数。

function doubleCount() in ondblclick="doubleCount();"

和

function singleCount() in onClick="singleCount();"

内部功能，您可以更新您的计数。

答案 3 :(得分：0)

将您的功能更新为：

from_adapter=new ArrayAdapter<String>(getBaseContext(),android.R.layout.simple_spinner_item, title);
from_adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            title2.clear();
            from_adapter2=new ArrayAdapter<String>(getBaseContext(),android.R.layout.simple_spinner_item, title2);
            from_adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spinner.setAdapter(from_adapter);
    //from_adapter2.clear();
    //from_adapter2.notifyDataSetChanged();
    spinner2.setAdapter(from_adapter2);

您只需使用$(document).ready(function() { var count=4; $( ".category-item-image" ).one("click", function(event){ $(this).find('a').toggleClass( "checked" ); $(this).find('.overaly,.checked-box').toggleClass( "checked" ); $('.topic-picker').css( "opacity", "1" ); if(count>0){ $("#counter").html("zgjidh edhe <span>" +count+ "</span> per te vazhduar "); count--; return false; }else{ $('#counter').css( "opacity", "0" ); $('.topic').addClass('topic-piker-right'); } }); }); 来计算第一次点击。

相关问题
最新问题