我有一个选择器:#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;
但是一次显示所有。我想要显示选定的计时器(点击显示第一个计时器),而不是全部。
答案 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>