Как я могу динамически добавлять или удалять классы, прикрепленные к элементу, используя jquery? - PullRequest
Новая
       12

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

1 голос
/ 19 октября 2011

Я пытаюсь динамически добавлять и удалять классы, используя 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, на class = "sub sub-INACTIVE" ....

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

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

Спасибо!

Ответы [ 4 ]

3 голосов
/ 19 октября 2011

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

$(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 для активных.

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

3 голосов
/ 19 октября 2011

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

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

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

надеюсь, это поможет! веселит.

1 голос
/ 19 октября 2011

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

<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');
    });
});

Кроме того, вы можете проверить свой CSS. Я не думаю, что настройка display:! Важный; на самом деле что-нибудь сделает. Фактически, используя приведенный выше пример, вам даже не понадобится субактивный класс , потому что субэактивный класс субагент исключен из элемента, поэтому отозвать "display" никто;" утверждение.

1 голос
/ 19 октября 2011

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

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

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

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

...