更新下一个元素

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

或把它在页面的底部。