Question

您好我最近提出了一个关于定位动态制作链接的问题，有人向我提供了一个有效的答案，但仔细研究了一下，我需要的功能略有不同。

以下代码切换突出显示的类，该段对应于由单独函数生成的链接。这是基于3个鼠标事件：

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

这很有效，但是如果点击相关链接（直到点击另一个链接），我希望突出显示的类保持不变。目前它为每个列出的事件切换，如果点击则不会保持突出显示。我已经尝试为每个事件创建单独的函数，并尝试在每个事件的不同组合中使用.addClass ,. removeClass`但我不能仅在单击时保持突出显示。非常感谢

编辑：

下面是一个jsfiddle链接http://jsfiddle.net/RVYnb/6/，感谢

Answer 1

你的意思是你希望突出显示保持不变直到用户点击其他内容？

这样的行为？：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");
});

Answer 2

你可能想要这样的东西：

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

jQuery Click事件问题

2 个答案: