Question

我有几行文字。每一行都包含在一个带有增量值的范围内，以确定哪一行是什么（例如，第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行和第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行分组。

Answer 4

我已经找到了一个有点冗长的解决方案来维持你当前的结构。似乎运作良好，虽然对你的案子来说可能有点矫枉过正......无论如何，看看：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");
});

突出显示基于数组的行

4 个答案: