как динамически добавлять или удалять классы, прикрепленные к элементу, с помощью jquery?

Я пытаюсь динамически добавлять и удалять классы, используя jQuery на своей веб-странице. Вот код -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
    .sub-inactive{display:none;}
    .sub-active{display:!important;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('.sub').parent().hover(
        function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
        function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
        );
    });
</script>
</head>
<body>
    <div id="container">
        <ul class="main">
            <li>link1</li>
            <li>link2</li>
            <li>link3
                <ul class="sub sub-inactive">
                    <li>link 3a</li>
                    <li>link 3a</li>
                    <li>link 3a</li>
                    <li>link 3a</li>
                </ul>
            </li>
            <li>link4</li>
            <li>link5</li>
        </ul>
    </div>
</body>
</html>

По сути, к элементу прикреплено несколько классов (в данном случае субактивный, субактивный). И на основе некоторого события, которое происходит на странице, я хочу динамически изменять состояние класса элемента. т.е., например, если для элемента класс, который присутствует прямо сейчас, является class = "sub sub-active", я хочу изменить с помощью jquery класс = "sub sub-INACTIVE"....

Пожалуйста, дайте мне знать, как добавить/удалить определенные классы из элемента. Две строки кода, приведенные ниже (из приведенного выше примера), похоже, не работают -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
        function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }

Спасибо!


javascript dynamic jquery css addclass
person arun nair    schedule 19.10.2011    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Одно простое изменение

$(document).ready(function(){
  $('.sub').parent().hover(
    function(){ $('.sub', this).removeClass('sub-inactive').addClass('sub-active'); },
    function(){ $('.sub', this).removeClass('sub-active').addClass('sub-inactive'); },
    );
});

Когда вы используете toggleClass(), все становится еще проще:

$(document).ready(function(){
  $('.sub').parent().hover(function() {
    $('.sub', this).toggleClass('sub-inactive sub-active');
  });
});

В любом случае не имеет особого смысла иметь дополнительный класс для неактивного состояния. Просто настройте .sub с неактивным (по умолчанию) видом и переключите .sub-active на активные.

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

person Tomalak    schedule 19.10.2011
comment
действительно ли это относится к родительскому элементу (в данном случае li link3) или к ul, которому дается «подкласс»? Я попробовал ваш код, он скрывает главное меню li (link3) от отображения при наведении курсора... - person arun nair; 19.10.2011
comment
@arun: это всегда относится к элементу, к которому вы прикрепили обработчик событий. В вашем случае родителю .sub. Вот почему я использую this в качестве контекста для операции jQuery в обработчике событий. (Попробуйте мой код еще раз, возможно, вы пробовали первую версию) - person Tomalak; 19.10.2011

arrow_upward
3
arrow_downward

используйте toggleClass(), чтобы добавить класс, если он еще не существует, или удалите его, если он присутствует. поскольку логика такая же, вы можете просто передать одну функцию hover.

$(document).ready(function(){
    var sub = $('.sub');
    sub.parent().hover(function(){ 
        sub.toggleClass('sub-inactive sub-active'); 
    });
 });

документы здесь.

надеюсь, это поможет! ваше здоровье.

person keeganwatkins    schedule 19.10.2011

arrow_upward
1
arrow_downward

Я предполагаю, что мой собственный код (в вопросе), хотя и неэффективный, на самом деле работает. Проблема была с одной дополнительной запятой в конце функции mouseleave в событии наведения -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },

запятая в конце второй строки кода выше вызвала ошибку в JS, и все это время я думал, что проблема связана с тем, как я использовал removeClass и addClass.

спасибо за помощь всем, я немного узнал из двух приведенных выше ответов.

person arun nair    schedule 19.10.2011
comment
Но $('.sub') выберет все такие элементы на всей странице — я сомневаюсь, что вы действительно этого хотите. - person Tomalak; 19.10.2011

arrow_upward
1
arrow_downward

Я думаю, что в основном то, что вы ищете, это что-то вроде этого...

<script type="text/javascript">
$(document).ready(function(){
    $('.sub').parent().hover(function(){ 
        $(this).find('ul.sub').removeClass('sub-inactive').addClass('sub-active');
    });
    $('.sub').parent().mouseout(function(){
        $(this).find('ul.sub').removeClass('sub-active').addClass('sub-inactive');
    });
});

Also, you might want to check your CSS. I don't think that setting display:!important; will actually do anything. In fact, using the above example, you shouldn't even need the sub-active class, because the sub-inactive class is stripped from the element, therefore revoking the "display:none;" statement.

person thedestry    schedule 19.10.2011
comment
селектор $('.sub') можно использовать повторно, как и результат parent(), как и обработчик для каждого вызова hover() и .mouseout(). - person keeganwatkins; 19.10.2011