在一個地方的幾個對象

Question

我有一個選擇器：＃circle-timer和我有幾個對象是目標是這個選擇器。是否有任何選項僅顯示選定的項目？ 實施例：

function timer(time){ 
 
    var target = $('.value'); 
 
\t 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)

<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> 
 
\t <li>show first timer</li> 
 
\t <li>show second timer</li> 
 
</ul>

但被示出所有在一次。我想要顯示選定的定時器（，當點擊顯示第一個定時器），不是全部。

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>