JQuery добавить функциональность класса не работает - PullRequest
Новая
       41

JQuery добавить функциональность класса не работает

2 голосов
/ 09 июня 2011

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

Затем, когда пользователь щелкает фоновое изображение, положение должно снова измениться, а цвет фона должен меняться только тогда, когда пользователь не находится при наведении. Я пробовал это, но это не будет работать.

JS - 

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS - 

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML 

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

Любые идеи, что не так. Новый класс не подходит для элемента.

Marvelous

1 Ответ

3 голосов
/ 09 июня 2011 
$(id).addClass('ractive');

не получает правильный селектор. Из вашей разметки вы должны делать. 

$('.review').click(function() {
    $(this).addClass('ractive');
});

Затем вы должны удалить onclick="reviews(this); из вашей разметки. Если вы используете jquery для применения классов, придерживайтесь этого подхода в целом. Не смешивайте навязчивый и ненавязчивый JavaScript . Приведенный выше код добавит класс ractive только к той ссылке, по которой вы щелкнули.

Кроме того, измените ваш css с #reviews .review .ractive на просто #reviews .ractive. Класс, который вы имеете, ищет элемент в обзоре с классом ractive, вам это не нужно, поскольку класс находится на том же элементе 

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}
...