0

数行のテキストがあります。各行は、どの行が何であるかを決定するために、最後に増分値を持つスパンでラップされます（たとえば、行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行目がグループ化されているという配列ができました。つまり、マウスをline-1の上に置いた後、line-1とline-2で背景を異なる色に変えます（配列に従って）。また、line-5をマウスで動かした場合は、line-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

コンテナにクラスを追加し、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 に答える
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 に答える