更新下一個元素

Question

我有這樣的代碼：

<div class="trackOn" id="line1"> 
    <span class="trackCounter">1</span> 
    <span class="trackTime1"> 
     <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" > 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option>     
     </select> 
    </span> 
    <span class="trackTime2"></span> 
    <span class="trackTime3"></span> 
</div> 

<div class="trackOn" id="line2"> 
    <span class="trackCounter">2</span> 
    <span class="trackTime1"> 
     <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" > 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option>     
     </select> 
    </span> 
    <span class="trackTime2"></span> 
    <span class="trackTime3"></span> 
</div> 

<div class="trackOn" id="line3"> 
    <span class="trackCounter">3</span> 
    <span class="trackTime1"> 
     <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" > 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option>     
     </select> 
    </span> 
    <span class="trackTime2"></span> 
    <span class="trackTime3"></span> 
</div> 

<div class="trackOn" id="line4"> 
    <span class="trackCounter">4</span> 
    <span class="trackTime1"> 
     <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" > 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option>     
     </select> 
    </span> 
    <span class="trackTime2"></span> 
    <span class="trackTime3"></span> 
</div> 

現在，舉例來說，如果我從#line2選擇值3我想改變下選擇的價值boxex（在#line3和#line4上的那些）在3。

Answer 1

這將是更好的附加事件處理程序使用jQuery：

$('.trackInputDate').change(function() { 
    updateHours($(this).val()); // or was `updateHours` supposed to be the 
           // function that should handler the update? 
    $(this).closest('.trackOn') 
     .nextAll('.trackOn') 
     .find('.trackInputDate').val($(this).val()); 
}); 

參考：.closest，.nextAll，.find

---

的DOM必須完全解析之前，您可以附加的事件處理程序。因此，要麼把代碼中ready()事件處理程序：

$(function() { 
    // code here 
}); 

或把它在頁面的底部。