0

我有几行的正文。每一行都包裹在一个 span 中，末尾有一个递增的值，以确定哪一行是什么（例如，第 1 行、第 2 行、第 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;
});
4

4 回答 4

4

如果您可以对 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/

于 2012-10-07T18:27:19.303 回答
1 
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/

于 2012-10-07T19:05:53.447 回答
0

我已经找到了一个有点冗长的解决方案来维持您当前的结构。似乎工作得很好，虽然它可能对你的情况有点矫枉过正......无论如何，看看：http: //jsfiddle.net/Ap6JP/

var groups = [
  [1, 2],
  [5, 6]
]

var lineIdFor = function($span) {
  return parseInt($span.attr("id").match(/\d+/)[0]);  
};

var groupFor = function(lineId) {
  var group;
  $.each(groups, function() {
    if(this.indexOf(lineId) >= 0) {
      group = this;
    }
  });

  return group || [lineId];
};

var spansInGroup = function(group) {
  var $spans = new $();

  $.each(group, function() {
    $spans = $spans.add($("#line-" + this));
  });

  return $spans;
};

var groupForSpan = function($span) {
  var lineId = lineIdFor($span);
  var group  = groupFor(lineId);
  return spansInGroup(group);
};

$("#textbody").on("mouseover", "span", function() {
  var $group = groupForSpan($(this));
  $group.addClass("highlight1");
});

$("#textbody").on("mouseout", "span", function() {
  var $group = groupForSpan($(this));
  $group.removeClass("highlight1");
});​
于 2012-10-07T18:53:10.630 回答
0

您可以向容器中添加一个类，并使用 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 行进行分组。

于 2012-10-07T18:22:32.507 回答