javascript - 悬停/单击/取消单击以突出显示文本

Question

我正在编写一个包含两栏的在线英语-捷克语平行文本。有粗略版本here 。有人提出了明智的建议，将鼠标悬停在段落上会突出显示该段落及其在另一种语言中的对应段落。这特别有用，因为文本没有完全相同的段落。有一个小的jsfiddle实现了这个想法here .

但我想添加一个相关功能。 将鼠标悬停在某个段落上，它会突出显示该段落及其对应内容，单击某个段落，该段落及其对应内容会保持突出显示，单击其他位置，突出显示就会消失。

这容易实现吗？我对 javascript 几乎一无所知，我只是使用别人的代码:

$(document).ready(function() {
    $("label").hover(function() {
        $("label[class='" + $(this).attr("class") + "']").each(function(){
            $(this).addClass("highlight");
        });
    });

    $("label").mouseleave(function() {
        $("label[class='" + $(this).attr("class") + "']").each(function(){
            $(this).removeClass("highlight");
        });
    });
});

Answer 1

基本示例 fiddle here .

代码使用一个变量来指示是否应删除离开段落(mouseleave)突出显示。默认行为是删除突出显示，并且仅当单击的目标是 label 时才会在单击时更改。单击任意位置都会删除突出显示，悬停在另一个段落上也会删除突出显示。从可用性 Angular 来看，您可能需要更改此行为，以使单击产生的突出显示更持久且更难以意外关闭。

var stayHighlighted = false;
$(document).ready(function() {
    $(document).click(function(e){
        if ($(e.target).is(':not(label)') ) {
            $('.highlight').removeClass('highlight'); 
            stayHighlihted = false;
        } else {
            stayHighlighted = true; 
        }
    });

    $("label").mouseenter(function() {
        $(".highlight").removeClass("highlight");
        $("label." + $(this).attr("class") ).addClass("highlight");
    });

    $("label").mouseleave(function() {
        if (!stayHighlighted) {
            $(".highlight").removeClass("highlight");
        } else {
            stayHighlighted = false;
        }
    });
});​