Блог

Главная - Вопросы по программированию - обновите следующие элементы на том же уровне в DOM

обновите следующие элементы на том же уровне в DOM

#jquery

#jquery

Вопрос:

У меня есть этот код :

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

теперь, например, если я выберу значение 3 из #line2 , я хотел бы изменить значение следующего поля выбора (таким образом, те, что на #line3 и #line4 ) в 3 .

Ответ №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
});

или поместите это внизу страницы.

Комментарии:

1. Да, функция updateHours() была функцией, но я могу избежать этого и использовать этот обработчик событий… намного лучше 🙂 в любом случае, я получаю эту ошибку Object #<an HTMLSelectElement> has no method 'val'

2. В настоящее время у меня проблемы с подключением к jsfiddle. net но я предоставлю демо-версию, как только смогу.

3. @markzzz: Ах, это опечатка, я забыл $ перед (this) . Исправлено.

4. 🙂 Да, но он не может получить значение select. $(this).val() не выводите значение…

5. @markzzz: У меня это работает. Убедитесь, что код находится в document.ready обработчике или внизу страницы. Или я не понимаю вашу проблему.