如何在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。