很少有物体在一个地方

时间:2017-07-24 21:38:00

标签: javascript jquery

我有一个选择器:#circle-timer我有几个目标是这个选择器的对象。是否有任何选项只显示所选项目? 例如:



function timer(time){
  var target = $('.value');
	var counter = time;
  var id = setInterval(function() {
       counter--;
       if(counter < 0) {
             clearInterval(id);
       } else {
            target.text(counter);
       } 
  }, 1000);
}

var p = timer(60);
var c = timer(33)
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
     <div id="circle-timer" class="circle-timer">
           <div class="time">
                   <p class="value">00</p>
           </div>
      </div>
</div>
<ul>
	<li>show first timer</li>
	<li>show second timer</li>
</ul>
&#13;
&#13;
&#13;

但是一次显示所有。我想要显示选定的计时器(点击显示第一个计时器),而不是全部。

1 个答案:

答案 0 :(得分:0)

也许这会有所帮助 jsFiddle

$('li').click(function(){
  $(".value2").toggle();
  $(".value1").toggle();
})

function timer(time,element){
  var target = $('p.'+element);
    var counter = time;
  var id = setInterval(function() {
       counter--;
       if(counter < 0) {
             clearInterval(id);
       } else {
            target.text(counter);
       } 
  }, 1000);
}

var p = timer(60,'value1');
var c = timer(33,'value2')


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
     <div id="circle-timer" class="circle-timer">
           <div class="time">
                   <p class="value1">00</p>
                   <p class="value2" style='display:none'>00</p>
           </div>
      </div>
</div>
<ul>
    <li class="value1">show second timer</li>
    <li class="value2" style='display:none'>show first timer</li>
</ul>