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

这是关闭到您所追求的目标。 hover()正常工作（请注意，我使用hover()和toggleClass()代替hover()和mouseleave()。点击后，突出显示仍然保留。要删除突出显示，只需再次单击该段落（这似乎比“单击任意位置”更加用户友好和直观）。它还允许选择多个段落，并且代码非常干净。

$(document).ready(function() {
    // Capture hover
    $("label").on("hover click", function(e) {
        var $label = $("label[class='" + $(this).attr("class") + "']");
        if(e.type == "click")
            $label.toggleClass("clicked");
        else
            $label.toggleClass("highlight");
    });
});

这是a working fiddle。

Answer 2

基本示例小提琴here。

代码使用变量来指示是否应删除离开pargraph（mouseleave）突出显示的oon。默认行为是删除突出显示，只有当点击目标为label时，才会在点击时更改。单击任意位置可以删除突出显示，因此将鼠标悬停在其他段落上。可用性方面，您可能希望更改此行为，以便使点击更加永久化并且更难以意外关闭而产生突出显示。

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;
        }
    });
});

Answer 3

简化了您的代码并添加了点击功能：DEMO

$(document).ready(function() {
    $("label").mouseenter(function() {
        $label = $(this).attr("class");
        $('.'+$label).addClass("highlight");
    });
    $("label").mouseleave(function() {
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').removeClass("highlight");
    });
    $("label").click(function(event) {
        event.stopPropagation();
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').addClass("highlight-click");
    });
    $('html').click(function() {
        $('label').removeClass("highlight-click");       
    });
});

忍者编辑：添加了正确的答案代码。

悬停/单击/取消选中以突出显示文本

3 个答案: