jquery.parents() выбирает дедушку и бабушку и братьев и сестер дедушки и бабушки

То, что я пытаюсь выполнить, - это когда пользователь фокусируется на текстовом поле, поле, которое находится внутри, добавит класс «active_fieldset», чтобы он дал хороший визуальный сигнал о том, где пользователь находится в форме. Используя следующий javascript, он влияет на родительский набор полей, но также влияет и на все поля для сиблинга. Я делаю что-то неправильно? Есть что-то принципиально неправильное с моим HTML или javascript?jquery.parents() выбирает дедушку и бабушку и братьев и сестер дедушки и бабушки

Пример HTML:

<div id="content"> 

<form action="next_page" method="post"> 

    <fieldset> 
    <legend>Foo</legend> 

    <p><label for="one">One</label> <input type="text" class="input_text" name="one" value="" id="one"></p> 
    </fieldset> 

    <fieldset> 
    <legend>Bar</legend> 

    <p><label for="two">Two:</label><input type="text" class="input_text" name="two" value="" id="two"></p> 

    </fieldset> 

    <p><input type="submit" value="Continue &rarr;"></p> 
</form> 

</div>

form.js:

$(document).ready(function(){ 
$('.input_text').focus(function(){ 
    $(this).parents('fieldset').addClass("active_fieldset"); 
}); 
});

EDIT:

Я включил мой CSS:

fieldset 
{ 
    border-width: 10px 0 0 0; 
    border-style: solid; 
    border-color: #0D6EB8; 
} 

fieldset.active_fieldset 
{ 
    border-width: 10px 0 0 0; 
    border-style: solid; 
    border-color: #0D6EB8; 
}

источник

2009-09-20 Kylee

Попробуйте использовать метод closest , Вам, вероятно, придется сопоставить это с некоторым другим кодом, чтобы убедиться, что класс удален из всех других наборов полей.

$('.input_text').focus(function() { 
    $('fieldset').removeClass('active_fieldset'); 
    $(this).closest('fieldset').addClass('active_fieldset'); 
});

Цитирование из документации:

Ближайших произведений первого глядя на текущем элементе, чтобы увидеть, если он соответствует указанному выражению, если так просто возвращает сам элемент. Если он не соответствует, то он будет продолжаться до , переверните документ, родительский родительский, пока не будет найден элемент, который соответствует указанному выражению. Если не найдено соответствующего элемента, то ни один не будет возвращен.

источник

2009-09-20 13:54:53 tvanfosson

Это один из способов сделать это, но на самом деле не затрагивает проблему, которую имеет пользователь. – cletus

cletus прав, я пробовал ближе всего, и это вызывает ту же проблему. – Kylee

Я не уверен, что проблема связана с селектором, но, возможно, с невозможностью удалить класс из других полей, когда сменяется фокус. Я не думаю, что метод родителей фактически выбирает братьев и сестер родителя (это будет ошибка IMO). Я обновил свой пример. – tvanfosson

Я хотел бы предложить:

$("input.input_text").focus(function() { 
    $("fieldset.active_fieldset").removeClass("active_fieldset"); 
    $(this).parents("fieldset").addClass("active_fieldset"); 
}).blur(function() { 
    $("fieldset.active_fieldset").removeClass("active_fieldset"); 
});

источник

2009-09-20 14:17:30 cletus

Это вызывает некоторое нечетное поведение. Я сделал класс «active_fieldset» для отображения: none; и поле для сиблинга исчезает, но родительский набор полей не работает. Я изменяю «active_fieldset», чтобы изменить цвет текста на красный, и он работает только с родительским набором полей. Затем я меняю «active_fieldset» на следующее: border-width: 10px 0 0 0; border-style: solid; border-color: red; Ни один из полей не затронут. Bizarre. – Kylee

У вас есть что-то еще. Возможно, с вашим CSS. – cletus

Использование parents() с параметром.

$ ("# test"). Родители («что-то»); // предоставит вам родительский класс, который имеет класс.

источник

2009-09-20 15:50:58

Я тоже это пробовал. $ (this) .parents ('fieldset'), но это создает такое же поведение, как описано в вопросе. – Kylee

Возможно, это код CSS, в котором есть ошибка. Я думаю, что предложение использовать JQuery.closest было правильным.

источник

2009-09-20 16:08:05

Я редактировал вопрос, чтобы включить css, который я использую. – Kylee

jquery.parents() выбирает дедушку и бабушку и братьев и сестер дедушки и бабушки

ответ

Смежные вопросы