Проблема с добавлением классов jQuery и удалением классов при изменении

#jquery #css #onchange #addclass #removeclass

Вопрос:

Я пытаюсь заставить addClass и removeClass jQuery работать в среде выбора формы с небольшим успехом.

Я хочу изменить класс родительского div и пытался передать идентификатор в функции, но все мои попытки были тщетными. Любые указания и помощь будут высоко оценены.

 <div id="MaxAge" class="SearchFormStyle">
                <select name="maxage" onchange="addClass(MaxAge);">
                    <option value="0">Age</option>
                    <option value="1" >1 Year Old</option>
                    <option value="2" >2 Years Old</option>
                </select>
                    <span class="ThisValue">
                        <a href="#" onclick="RemoveClass(MaxAge)">VALUE ENTERED HERE</a>
                    </span>
                </div>

<script>
    function addClass (id) { 
        div = "#"   id; 
        $(div).addClass("InputSet"); 
    }
    function RemoveClass (id) { 
        div = "#"   id; 
        $(div).removeClass("InputSet"); 
    }
</script>

Ответ №1:

addClass(MaxAge) будет передаваться значение переменной MaxAge addClass , а не строка 'MaxAge' .

Кроме того, вам действительно следует использовать jQuery для привязки обработчиков событий вместо встроенных обработчиков событий:

 $("select[name='maxage']").change(function() {
    addClass('MaxAge');
});

$('.ThisValue a').click(function(event) {
    RemoveClass('MaxAge');
    event.preventDefault();
});

Чтобы узнать больше об обработчиках событий, я рекомендую прочитать статьи по адресу quirksmode.org .

Существуют и другие проблемы, такие как div переменная in addClass и RemoveClass глобальная. Не забывайте var , когда вы объявляете переменные. Также именование функции несовместимо add Remove с .

Руководство по MDN JavaScript очень полезно для изучения основ JavaScript.

Ответ №2:

вы почти делаете это правильно. Вот что я бы сделал (с некоторыми комментариями для вас)

 // onchange event of the selectbox with id = maxage
$("#maxage").change(function() {
    $("#MaxAge").addClass("InputSet");
});

// the click event for the a element within span with class ThisValue
$("span.ThisValue a").click(function(e) {
    // prevent doing default behaviour like going to another location...
    e.preventDefault();
    $("#MaxAge").removeClass("InputSet");
});

1. В форме, которую я имею, около 10 select, поэтому было бы проще иметь одну функцию, которая может обрабатывать все select, а не функцию для каждого идентификатора элемента. Надеюсь, это имеет смысл?

Ответ №3:

Вы никогда не создаете экземпляр переменной div.

Попробуйте это:

 var div = "#"   id;