javascript - 基于数组的高亮行

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/