css - Css 需要突出显示表格中的常用词

Question

我在 slate.com 上看到了这个页面，当您将鼠标悬停在一个实例上时，它会在表格中突出显示相似的单词： http ://www.slate.com/blogs/lexicon_valley/2013/09/11/top_swear_words_most_popular_curse_words_on_facebook.html 有谁知道如何这个完成了？

Answer 1

你可以像这样使用 jQuery 来做到这一点：

$('table td').mouseover(function() {
    $('table td').removeClass('highlight')
    var text = $(this).text();
    $('table td').filter(function() { return $(this).text() == text; }).addClass('highlight');
})

检查这个jsFiddle

Answer 2

使用 jQuery.data

总是要知道事情是如何工作的，第一步是阅读源代码

检查这个：

例子

$('.interactive_table .cell_word')
    .hover(function(){
        var word = $(this).data('word');
        $(this).parent().parent()
        .find('.word_'+word)
        .addClass('highlighted');
    },function(){
        var word = $(this).data('word');
        $(this).parent().parent()
        .find('.word_'+word)
        .removeClass('highlighted');
});

$('.interactive_table .cell_rank_number')
    .hover(function(){
        $(this).parent()
        .find('.cell_word')
        .addClass('highlighted');
    },function(){
        $(this).parent()
        .find('.cell_word')
        .removeClass('highlighted');
});