基于数组的高亮显示行

Question

我有一个由几行组成的正文。每一行都被包装在一个跨度中，末尾有一个递增的值，以确定哪一行是什么(例如，line-1、line-2、line-3等等)。

<div id="textbody">
    <span id="line-1">what is love</span><br/>
    <span id="line-2">oh baby, don't hurt me</span><br/>
    <span id="line-3">Don't hurt me no more</span><br/>
    <span id="line-4">Oh, baby don't hurt me</span><br/>
    <span id="line-5">Don't hurt me no more</span><br/>
    <span id="line-6">What is love</span><br/>
    <span id="line-7">Yeah</span><br/>
</div>

现在，我有一个数组，表示第1行和第2行分组在一起，第5-6行分组在一起。这意味着当鼠标悬停在第-1行上时，将第-1行和第-2行的背景设置为不同的颜色(根据数组)，如果鼠标悬停在第-5行上，则在第-5行和第-6行执行背景操作。

它只是在一个跨度的基础上这样做，但我不确定如何处理它的数组部分。我应该使用像in_array这样的东西吗？我知道这是一个PHP函数，但Google告诉我，人们已经为JS构建了类似的函数。

$("span[id^='line-']").live('mouseover', function(e) {
  e.preventDefault();
  var line_id = $(this).attr('id').substring(6);

  $(this).addClass("highlight1");

  return false;
}); 

$("span[id^='line-']").live('mouseleave', function(e) {
  e.preventDefault();
  var line_id = $(this).attr('id').substring(6);

  $(this).removeClass("highlight1");

  return false;
}); 

Answer 1

如果可以对HTML中的元素进行分组：

<div id="textbody">
  <span>
    <span>what is love</span><br/>
    <span>oh baby, don't hurt me</span><br/>
  </span>
  <span>Don't hurt me no more</span><br/>
  <span>Oh, baby don't hurt me</span><br/>
  <span>
    <span>Don't hurt me no more</span><br/>
    <span>What is love</span><br/>
  </span>
  <span>Yeah</span><br/>
</div>

那么你根本不需要任何脚本，只需要一些CSS：

#textbody > span:hover { background: yellow; }

演示：http://jsfiddle.net/Guffa/Rfwye/

Answer 2

var groups = [{
    group: [1,2],
    color: "#000"},
{
    group: [3,7],
    color: "#0ff"},
{
    group: [4,6],
    color: "#ff0"},
{
    group: [5],
    color: "#ff0000"}];

$(groups).each(function(index, item) {
    $(item.group).each(function(i, span) {
        $("#line-" + span).addClass("group" + index).data("bgcolor", item.color);
    });
});

$("#textbody span").mouseover(function(){
   $("." + $(this).attr("class")).css("background-color", $(this).data("bgcolor"));
});

$("#textbody span").mouseout(function(){
   $("." + $(this).attr("class")).css("background", "transparent");
});

演示：http://jsfiddle.net/y8UrW/

Answer 3

您可以向容器中添加一个类，并使用CSS根据悬停在其上的线条来突出显示线条。

$('#textbody').addClass('over-' + $(this).id());

然后使用CSS对它们进行分组

#textbody span[id^='line-']:hover, /* Always highlight the hovered line */
.over-line-1 > #line-2, .over-line-2 > #line-1 /* Higlight the partner line */
{ background: yellow }

将对行1和行2进行分组。