Question

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

＆＃13;

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;

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

Answer 1

也许这会有所帮助 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>

很少有物体在一个地方

1 个答案: