如何在html中为多个元素设置相同的ID

Question

我想在运行时创建10个元素使用倒数计时器。每个元素都有过期时间，所以我想向用户显示过期的剩余时间。因此，我使用jquery文件来完成此操作。因此，我必须使用一个标识符来显示剩余时间。对于一个元素，它工作正常，但是当我使用它的多种元素，它只是适用于第一element.how我可以解决这个问题，以显示所有元素的剩余时间

jQuery的文件

//var count = 1000; 
    //var counter = setInterval(timer, 1000); 
    //function timer() { 
    // count -= 1; 
    // if (count==1000) { 
    //  clearInterval(counter); 
    // } 
    // document.getElementById("num").innerHTML = count; 
    //} 
    function CountDown() { 

     this.start_time = "02:00:00:23"; 
     this.target_id = "#timer"; 
     this.name = "timer"; 
    } 

CountDown.prototype.init=function(){ 
    this.reset(); 
    setInterval(this.name+'.tick()',1000); 
} 
CountDown.prototype.reset=function(){ 
    time = this.start_time.split(":"); 
    this.days = parseInt(time[0]); 
    this.hours = parseInt(time[1]); 
    this.minutes=parseInt(time[2]); 
    this.seconds = parseInt(time[3]); 
    this.update_target(); 
} 

CountDown.prototype.tick=function(){ 
    if (this.seconds > 0 || this.minutes > 0 || this.hours > 0 ||this.days>0) { 

     if (this.hours == 0 && this.minutes == 0 && this.seconds == 0) { 
      this.days = this.days - 1; 
      this.hours = 23; 
      this.minutes = 59; 
      this.seconds = 59; 
     } 
     if (this.minutes == 0 && this.seconds==0) { 
      this.hours = this.hours - 1; 
      this.minutes = 59; 
      this.seconds = 59; 
     } 
     else if (this.seconds == 0) { 
      this.minutes = this.minutes - 1; 
      this.seconds = 59; 
     } 
     else { 
      this.seconds = this.seconds - 1; 
     } 

    } 
    this.update_target(); 
} 

CountDown.prototype.update_target = function() { 
    seconds = this.seconds; 
    minutes = this.minutes; 
    hours = this.hours; 
    days = this.days; 
    if (seconds<10) 
     seconds = "0"+seconds; 
    if (minutes < 10) 
     minutes = "0"+ minutes; 
    if (hours < 10) 
     hours = "0" + hours; 
    if (days < 10) 
     days = "0" + days; 
    $(this.target_id).val(days+":"+hours+":"+minutes + ":" + seconds) 
    // $(this.target_id).val(this.minutes+":"+seconds) 


} 

Html 




    <script src="~/Scripts/jquery-1.4.4.min.js"></script> 
    <script src="~/Scripts/countdown.js"></script> 
    <input type="text" id="timer" value=" " /> 
    <script> 
     timer = new CountDown(); 
     timer.init(); 
    </script> 

Answer 1

编辑： 我已经为它创建了一个JSFiddle，你能准确的请求吗？

See it here

我改变了这个：

timer = new CountDown("02:00:00:23"); 
timer.init(); 

而这个功能：

function CountDown(start_time) { 
    this.start_time = start_time; 
    this.target_id = ".timer"; 
    this.name = "timer"; 
} 

Answer 2

标识是在HTML中使用类，而不是唯一..更多元素可以有相同的类

$('.yourClass') 

而不是

$('#yourId') 

。

<script src="~/Scripts/jquery-1.4.4.min.js"></script> 
    <script src="~/Scripts/countdown.js"></script> 
    <input type="text" class="timer" value=" " /> 
    <script> 
    timer = new CountDown(); 
    timer.init(); 
    </script> 


function CountDown() { 

    this.start_time = "02:00:00:23"; 
    this.target_id = ".timer"; 
    this.name = "timer"; 
} 

Answer 3

ID是独特，只应在HTML页面中使用一次。另外，元素应该只有一个ID。类是而不是是唯一的，所以多个元素可以具有相同的类，而且，单个元素可以具有多个类。例如：

<div class="exampleClass anotherClass"></div> 
<div class="exampleClass></div> 
<div class="exampleClass></div> 

代替id="timer"使用class="timer"然后，在JavaScript文件中使用$(".timer")针对那些类。所以在你的情况，而不是this.target_id = "#timer"使用this.target_id =".timer";

这是一个很好的参考classes and ids。