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

how to set the same id for multiple element in html

本文关键字：元素 设置 ID HTML      更新时间：2023-09-26

我想对运行时创建的 10 个元素使用倒数计时器。 每个元素都有过期时间，所以我想向用户显示过期的时间是多少 remained.so 我使用 jquery 文件来执行此操作，所以我必须使用一个 id 作为标签来显示剩余时间.当我将其用于一个元素时，它可以正常工作，但是当我将其用于多个元素时，它仅适用于第一个元素，我如何解决此问题以显示所有元素的剩余时间

J查询文件

    //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>

Id 在 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";
}

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

在这里看到它

我改变了这个：

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";
}

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";

这是类和 id 的一个很好的参考。

相关文章：