помогите с добавлением классов с помощью jQuery - PullRequest
Новая
       30

помогите с добавлением классов с помощью jQuery

1 голос
/ 20 сентября 2011

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

<nav>
            <ul class="<?php echo $ul; ?>">
                <li class="home"><a class="home" href="/">Home</a></li>
                <li class="letters"><a class="letters" href="/product/type/letters">Letters</a></li>
                <li class="business active"><a class="active business" href="/product/type/business">Business</a></li>
                <li class="cards"><a class="cards" href="/product/type/cards">Cards</a></li>
                <li class="gifts"><a class="gifts"href="/product/gifts">Gifts</a></li>
            </ul>
        </nav>

/ JQuery / 

$('nav li a').hover(function(){
            var orginalClass = $(this).parent().parent().attr('class');
            $(this).parent().parent().attr('class', '');
            var classType = $(this).attr('class');
            $(this).parent().parent().addClass(classType);
        }, 
        function() {
            $(this).parent().parent().attr('class', '');
            $(this).addClass(orginalClass);
        });

Ответы [ 4 ]

3 голосов
/ 20 сентября 2011

Проблема в области действия вашей переменной "originalClass".Он входит в локальную область действия первой функции наведения, поэтому он недоступен во второй.

Что вам следует сделать, это просто добавить и удалить второй класс CSS, который перезаписывает настройки первого.

0 голосов
/ 20 сентября 2011 
$('nav li a').hover(function(){
            var ul = $(this).closest('ul');                                              
            ul.data('originalClass', ul.attr('class') );             
            ul.removeClass( ul.data('originalClass') );             
            ul.addClass( $(this).attr('class') );
        }, 
        function() {
            var ul = $(this).closest('ul'); 
            ul.removeClass( $(this).attr('class') ); 
            ul.addClass( ul.data('originalClass') );
        }
);
0 голосов
/ 20 сентября 2011 
var orginalClass='';   
$('nav li a').hover(function(){
    var ul = $(this).closest('ul');
    orginalClass = ul.attr('class');
    var classType = $(this).attr('class');
    ul.removeClass().addClass(classType);
}, 
function() {
    ul.removeClass().addClass(orginalClass);
});
0 голосов
/ 20 сентября 2011

Попробуйте следующее 

$('nav li a').each(function() {
  var savedClass = $(this).parents('nav').first().attr('class');
  $(this).hover(function() {
    $(this).parents('nav').first().attr('class', $(this).attr('class'));
  }, function() {
    $(this).parents('nav').first().attr('class', savedClass);
  });
});

Fiddle: http://jsfiddle.net/9J7RS/

...