テキストを強調表示するためのホバリング/クリック/クリック解除

Question

私は2つの列を持つオンライン英語 - チェコ語の平行テキストで作業しています。おおよそのバージョンはhereです。誰かが、段落の上にマウスを置くと、その段落とそれに対応する他の言語の段落がハイライト表示されるように、スマートな提案をしました。テキストはまったく同じ段落を持たないので、これは特に便利です。 hereこのアイデアを実装している小さなjsfiddleがあります。

しかし、私は関連する機能を追加したいと思います。段落の上にホバー、それは段落の上にそれとその対応、クリックの両方を強調し、それとその対応両方がが他の場所で、クリックを強調表示し、ハイライトが消えたまま。

これは簡単に実装できますか？私は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

はあなたのコードを簡素化し、クリック機能を追加しました：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");  
    }); 
}); 

忍者編集：追加されました正しいコードは答えること。

Answer 2

これはを閉じるの後です。 hover()は通常どおり動作します（hover()とmouseleave()の代わりにhover()とtoggleClass()が使用されています）をクリックするとハイライトが残ります。また、複数の段落を選択することが可能になるとかなりきれいなコードが賢明です。

$(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 3

基本的な例フィドルhere。

このコードでは、変数を使用して、pargraph（mouseleave）のハイライトを削除する必要があるかどうかを示します。デフォルトの動作はハイライトを削除することです。これはクリック時に変更されます。クリックしたターゲットが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; 
     } 
    }); 
});​