HTML 테이블 안에 여러 개의 jquery 카운트 다운을 한 번만 설정하십시오.

한 페이지에 여러 경매 상태를 표시해야하는 프로젝트를 진행하고 있습니다. 각 항목의 종료일이 다릅니다. 각 행에 고유 한 ID를 부여한 다음 해당 ID를 사용하여 시간을 설정하지만 한 번만 설정합니다. 이 내 스크립트 코드HTML 테이블 안에 여러 개의 jquery 카운트 다운을 한 번만 설정하십시오.

<script> 
$(document).ready(function(){ 
$('tr[id]').each(function() { 
var $this = $(this); 
var endDate = new Date(); 
var count = $this.attr("id"); 
var year = parseInt(count.slice(0,4)); 
var month = parseInt(count.slice(4,6)); 
var day = parseInt(count.slice(6,8)); 
var hour = parseInt(count.slice(8,10)); 
var minute = parseInt(count.slice(10,12)); 
var second = parseInt(count.slice(12,14)); 
endDate.setFullYear(year, month - 1, day); 
    endDate.setHours(hour+1); 
    endDate.setMinutes(minute); 
    endDate.setSeconds(second); 
$('.countdown-styled').countdown({ 
     until: endDate, 
     format: 'dHMS', 
     render: function(data) { 
     var el = $(this.el); 
     el.empty() 
      .append("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div>") 
      .append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>") 
      .append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>") 
      .append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>") 
     } 

    }); 
}); 
}); 
</script>

입니다 그리고 이것은 내 테이블의 레이아웃입니다 :

<body> 
<table id="timerTable"> 
<tr id="20130425190000"> 
<div class="countdown-styled" style="width:200px;"></div> 
</tr> 
<tr id="20130416190000"> 
<div class="countdown-styled" style="width:200px;"></div> 
</tr> 
<tr id="20130424190000"> 
<div class="countdown-styled" style="width:200px;"></div> 
</tr>

이 코드는 같은 시간에 테이블의 모든 카운트 다운에 대해 동일한 시간을 설정합니다 . (즉, 13 일 3 시간 58 분 24 초 9) 아이디어가 있습니까?

편집 :가는 방법은 ID를 사용하는 것이므로이 형식이어야합니다. 이 값은 서버에서 동적으로 설정되며이 형식으로 반환됩니다. 그래서 내가 parseInt과 slice을 사용합니다. 형식은 다음과 같습니다. 년/월/일 /시/분/초 (XXXXXXXXXXXXXX)

출처

2013-04-12 jkw4703

$ ('tr [id]')와 $ ('. 카운트 다운 스타일').

당신은 하나 개의 특정 하위에 카운트 다운을 적용 할 필요가 : 공식적으로

$this.find('.countdown-styled').countdown

, 당신의 HTML은 또한 세포 (TD 요소)없는,이 그냥 복사 실수 가정합니다.

출처

2013-04-12 22:11:16 Christophe

나는 이것을 시도했다. 나는 변화를 만들었고 타이머는 완전히 사라졌습니다. 내가 뭔가 잘못 했니? 위 코드는 기본적으로 테스트 페이지에있는 코드입니다. 다른 항목을 추가해야합니까? – jkw4703

html을 다시 확인 했습니까? td 요소는 어떻습니까? – Christophe

있습니다. 내가 말한 것을 보여주기 위해이 jsfiddles를 만들었습니다. 1)이 $ this.find없이 [링크] (http://jsfiddle.net/xcUSq/) 및 2) 함께 : [링크] (http://jsfiddle.net/xcUSq/1/) – jkw4703

HTML 테이블 안에 여러 개의 jquery 카운트 다운을 한 번만 설정하십시오.

답변

관련 문제