[英]how to set the same id for multiple element in html
I want to use countdown timer for 10 element that creating at run time. 我想对运行时创建的10个元素使用倒数计时器。 each element has expire time so I want to show user how much time of of the expiration is remained.so I use a jquery file to do this .so I must use an id for a tag to show the remained time .when I use it for one element it works fine but when I use it for multiple element it just works for first element.how can I solve this problem to show the remained time for all elements
每个元素都有过期时间,因此我想向用户显示剩余的过期时间。因此,我使用jquery文件执行此操作。因此,必须使用id作为标记来显示剩余时间。对于一个元素它工作正常,但是当我将其用于多个元素时它仅适用于第一个元素。我如何解决这个问题以显示所有元素的剩余时间
Jquery file 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>
Id is unique in html use class instead .. more element can have the same class id在html use类中是唯一的,而不是.. more元素可以具有相同的类
$('.yourClass')
instead of 代替
$('#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";
}
EDIT : I've created a JSFiddle for it, can you precise your request ? 编辑:我为此创建了一个JSFiddle,您可以精确化您的请求吗?
I changed this : 我改变了这个:
timer = new CountDown("02:00:00:23");
timer.init();
And this function : 而这个功能:
function CountDown(start_time) {
this.start_time = start_time;
this.target_id = ".timer";
this.name = "timer";
}
Id's are unique and should only be used once in an html page. ID是唯一的,并且只能在html页面中使用一次。 Also, and element should only have a single ID.
另外,and元素应该只有一个ID。 Classes are not unique so multiple elements can have the same class, also, a single element can have multiple classes.
类不是唯一的,因此多个元素可以具有相同的类,而且单个元素可以具有多个类。 Example:
例:
<div class="exampleClass anotherClass"></div>
<div class="exampleClass></div>
<div class="exampleClass></div>
Instead of id="timer"
use class="timer"
then in your javascript file use $(".timer")
to target those classes. 代替
id="timer"
使用class="timer"
然后在您的javascript文件中使用$(".timer")
定位这些类。 So in your case instead of this.target_id = "#timer"
use this.target_id =".timer";
因此,在您的情况下,
this.target_id = "#timer"
使用this.target_id =".timer";
而不是this.target_id = "#timer"
this.target_id =".timer";
Here's a good reference for classes and ids . 这是有关class和id的很好的参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.