Блог

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

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

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

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

Редактировать:

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

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

Подобное поведение? :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");
});
  

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

 $("#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