Wenige Objekte an einem Ort

Question

Ich habe einen Selektor: # Kreis-Timer und ich habe ein paar Objekte, die Ziel ist dieser Selektor. Gibt es Optionen, nur das ausgewählte Element anzuzeigen? Beispiel:

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>

Aber ist alles in einer Zeit zeigt. Ich möchte zeigen ausgewählten Timer (, wenn klicken Sie auf erste Timer anzeigen), nicht alle.

Answer 1

Vielleicht würde dies 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>