JQuery: addClass не работает на элементе с несколькими классами.Зачем?Я озадачен! - PullRequest
1 голос
/ 17 июня 2011

Это очень расстраивает. Это часть кода, написанного для формы. Элемент ввода, связанный с ошибкой проверки, должен отображать красную рамку. Он работает с методом .css , но я был бы признателен, если бы кто-нибудь показал мне, почему метод .addClass не работает.

<style type="text/css">
    .field_error{color:red;}
    .red_border{border:1px solid red;}
</style>

<script>
    $(document).ready(function(){
        $('.field_error').siblings().addClass('red_border');
    });
</script>
...
<label class="description" for="element_1">Email Address </label>
            <div>
            <input id="element_1" name="email" class="element text medium" type="text"/> 
                {% if form.email.errors %}
                    <div class="field_error">{{form.email.errors}}</div>

                {% endif %}
                     </div>

                      ..etc..

Если назначить «элемент_1» только один класс, он работает просто отлично.

Я также могу сделать это вместо:

$('.field_error').siblings().css("border", "1px solid red"); 

Однако я планирую добавить много контента в класс, который я добавлю. Есть ли способ заставить метод addClass работать?

Спасибо !!

Мэтт

ВАЖНОЕ РЕДАКТИРОВАНИЕ

Я забыл добавить несколько классов в мой код. Не удивительно, что некоторые люди растеряны. Пожалуйста, пересмотрите код еще раз.

<input id="element_1" name="email" class="element text medium" type="text"/> 

решаемые

Проблема заключалась в том, что у меня был файл CSS, который уже определил границы элемента ввода текста. Исправлено сейчас. Спасибо всем, кто хранит мозг у меня.

1 Ответ

5 голосов
/ 17 июня 2011

Работает для меня: http://jsfiddle.net/JAAulde/KPckC/1/ ( обновлено с исправлением нескольких классов )

Однако в вашем коде есть опечатка:

<input id="element_1" name="email" class="element type="text"/>

должно быть

<input id="element_1" name="email" class="element" type="text"/>

Может быть, это существует на вашем живом сайте?

...