jQuery Click событие вопроса

Question

Здравствуйте, я недавно задал вопрос, касающийся таргетинга динамически создаваемых ссылок, и кто-то любезно предоставил мне рабочий ответ, однако, рассмотрев его более подробно, необходимые мне функции немного отличаются.

Следующий код переключаетвыделенный класс для абзаца, который соответствует ссылке, создаваемой отдельной функцией.это основано на 3 событиях мыши:

$("#hi-4").live("mouseover mouseleave click", function(){
    $("p#p-4").toggleClass("highlighted");
});

Это прекрасно работает, однако я бы хотел, чтобы выделенный класс остался, если нажата соответствующая ссылка (пока не нажата другая ссылка) В настоящее время он переключается для каждого события в спискеи не остается выделенным при нажатии.Я попытался создать отдельные функции для каждого события и попытался использовать .addClass, .removeClass `в различных комбинациях для каждого события, но я не могу заставить его оставаться выделенным только при нажатии.большое спасибо

РЕДАКТИРОВАТЬ:

Вот ссылка jsfiddle http://jsfiddle.net/RVYnb/6/ на пример, спасибо

Answer 1

Вы, вероятно, хотите что-то вроде этого:

$("#hi-4").live("mouseover mouseleave", function(){
    if(!$("p#p-4").hasClass("clicked")) {
        $("p#p-4").toggleClass("highlighted");
    }
});

$("#hi-4").live("click", function() {
    $("p#p-4").addClass("clicked").addClass("highlighted");
});

$("a:not(#hi-4)").live("click", function() {
    $("p#p-4").removeClass("clicked").removeClass("highlighted");    
});

jsfiddle пример

Answer 2

Вы хотите, чтобы подсветка продолжалась до тех пор, пока пользователь не щелкнет что-нибудь еще?

Поведение, как это? : http://jsfiddle.net/QLEHY/1/

<a href='#'>Para 1</a>
<a href='#'>Para 2</a>
<a href='#'>Para 3</a>

<p>Some text. Some text. Some text. Some text. Some text. </p>
<p>Some text. Some text. Some text. Some text. Some text. </p>
<p>Some text. Some text. Some text. Some text. Some text. </p>


$('a').click(function(){
   $('p.active').removeClass('active');
   $('p') .eq($(this).index()).addClass('active');
});

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

$("#hi-4").live("mouseover mouseleave click", function(){
    $('p.highlighted').remove(); //remove all the highlighted classes. 
    $("p#p-4").toggleClass("highlighted");
});