Установить класс с jquery?

У меня есть функция javascript, которая выглядит так:

function UpdateFilterView(){

    if(_extraFilterExists){

        if($('#F_ShowF').val() == 1){

            $('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
            $('#extraFilterDropDownButton').css("display", "block");

            if($('#divCategoryFilter').css("display") == 'none'){
                $('#divCategoryFilter').show('slow');
            }
            return;

        }
        else{

            if($('#divCategoryFilter').css("display") == 'block'){
                $('#divCategoryFilter').hide('slow');
            }

            $('#extraFilterDropDownButton').css("display", "block");
            $('#extraFilterDropDownButton').attr('class', "showhideExtra_down");

            return;

        }
    }
    else{
        if($('#divCategoryFilter').css("display") != 'none'){
                $('#divCategoryFilter').hide('fast');
        }
        $('#extraFilterDropDownButton').css("display", "none");
    }
}

Это будет вызвано следующим кодом (изнутри $(document).ready(function() {):

$('#extraFilterDropDownButton').click(function () {
    if($('#F_ShowF').val() == 1){
        $('#F_ShowF').val(0);
    }
    else{
        $('#F_ShowF').val(1);
    }

    UpdateFilterView();
});

HTML для этого легко:

<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div>

У меня есть две проблемы:

  • Когда панель скрыта, и мы нажимаем кнопку div (extraFilterDropDownButton), верхняя левая часть страницы будет мерцать, а затем панель будет анимирована.

  • Когда панель отображается и мы нажимаем кнопку div, панель скроется ( "медленно" ), но кнопка не изменится на правильный класс, даже если мы установим ее в UpdateFilterView script?

Правильный класс будет установлен на кнопке при ее зависании, это задается с помощью следующего кода:

$("#extraFilterDropDownButton").hover(function() {
    if($('#divCategoryFilter').css("display") == 'block'){
        $(this).attr('class','showhideExtra_up_hover');
    }
    else{
        $(this).attr('class','showhideExtra_down_hover');
    }
}, 
function() {

    if($('#divCategoryFilter').css("display") == 'block'){
        $(this).attr('class','showhideExtra_up');
    }
    else{
        $(this).attr('class','showhideExtra_down');
    }
});

Ответы

Ответ 1

Чтобы полностью установить класс, вместо добавления одного или удаления, используйте это:

$(this).attr("class","newclass");

Преимущество этого в том, что вы удалите любой класс, который может быть установлен там, и reset, как вам нравится. По крайней мере, это сработало для меня в одной ситуации.

Ответ 2

Использовать jQuery

$(this).addClass('showhideExtra_up_hover');

и

$(this).addClass('showhideExtra_down_hover');

Ответ 3

<script>
$(document).ready(function(){
      $('button').attr('class','btn btn-primary');
}); </script>

Ответ 4

Мне нравится писать небольшой плагин, чтобы сделать вещи чище:

$.fn.setClass = function(classes) {
    this.attr('class', classes);
    return this;
};

Таким образом вы можете просто сделать

$('button').setClass('btn btn-primary');