1

Web ページのすべての単語には脚注があり、ユーザーはその単語/フレーズをクリックして脚注を表示します。ただし、一部の脚注は重複しています。つまり、脚注 1 は現在の単語に適用され、脚注 2 は現在の単語で始まるフレーズ全体に適用されます。

私たちは未来に住んでいるので、ユーザーが単語にカーソルを合わせると、関連するすべての脚注の範囲を示したいと思います。例：

ここに画像の説明を入力

私のバックグラウンドは HTML/CSS/JS であり、CSS を使用してすべてのスタックを見栄えよくすることに慣れています。それは私が理解できない HTML そのものです。これらの SPAN を別のものの上に積み重ねる方法についてアイデアを持っている人はいますか?

理想的には、生の入力には、タグ付けのために 100 万の SPAN が必要ではありません... JS は、段落内の単語の位置に基づいてスパンを挿入する必要があると思います。したがって、上記の例では、「score」という単語にカーソルを合わせると、JS は単語 2 (「score」) で始まる 1 単語のスパン、単語 1 (「Four」) で始まる 4 単語のスパン、および単語 1 (「4」) から始まる 6 単語のスパン。これが最善の方法である場合、ホバー時に単語を前後に数えてタグを追加するように jQuery に指示するにはどうすればよいですか?

4

2 に答える 2

0

あなたが説明した問題は興味深いものですが、実際には達成するのが非常に複雑なので、質問を 1 つずつ取り上げます。

それは私が理解できない HTML そのものです。これらの SPAN を別のものの上に積み重ねる方法についてアイデアを持っている人はいますか?

他のスパンの子であるスパンは、親の上に自動的に z インデックスが付けられるため、html は次のようになります。

<div class="container">
  <span>
    <span>
      Four <span>score</span> and seven
    </span> years ago
  </span>
  our fathers...
</div>

cssで子スパンにさまざまなスタイルを割り当てることができます（ご存知のように、完全を期すために追加します）：

.container span {..}
.container span > span {...}

ホバーで単語を前後に数えてタグを追加するように jQuery に指示するにはどうすればよいですか?

この部分は非常に難しいです。JavaScript で何かにマウスオーバーすると、要素の内容のテキストと、マウスの位置に関するあらゆる種類の情報を取得できます。

ブラウザごとに単語のバウンディング ボックスを計算しようとしても意味がありません。OS ごとにテキストのレンダリングが異なるため、等幅フォント以外のフォントでは文字ごとに幅が異なることは言うまでもありません。

理論的には、マップの組み合わせを使用し、(選択 API を介して) クリックをトリガーして、カーソルの下にある単語を見つけることは可能ですが、UI ではうまく機能しない可能性があります。幸運を！

于 2014-05-21T11:34:08.223 に答える
0

私は昨日からこのコンセプトに取り組んでおり、暫定的に機能するフィドルであるFIDDLEを思いつくことができました。

一般的な考え方は次のとおりです。

  1. すべての単語と関連する記述子を配列に入れます。

  2. 単語を動的に表示します。

  3. 非表示のデータを動的に表示される各単語に関連付けます。

  4. 単語にカーソルを合わせると、関連付けられたデータ (さまざまなレベルの記述子) が、表示したい場所に表示されます。

JS

var mydata = [
              ['four', 'a number', 'four score = 80', 'total of 87 years'],
              ['score', 'a word', 'four score = 80', 'total of 87 years'],
              ['and', 'a word', '', 'total of 87 years'],
              ['seven', 'a number', '', 'total of 87 years'],
              ['years', 'a word', '', 'total of 87 years'],
              ['ago', 'a word', 'ago = in the past', '']
              ];

for(var v=0; v<6; v++)
   {
    $('.holder').append("<div class='num" + v + "'>" + mydata[v][0] + '-' + " </div>");
    $(".num" + v).data( 'dataval1', mydata[v][1] );
    $(".num" + v).data( 'dataval2', mydata[v][2] );
    $(".num" + v).data( 'dataval3', mydata[v][3] );
    }

$('.holder div').on('mouseenter', function(){
  $('.putmehere').html(
                        $( this ).data('dataval1') + "<br />" +
                        $( this ).data('dataval2') + "<br />" +
                        $( this ).data('dataval3') + "<br />"
  );
});
$('.holder div').on('mouseleave', function(){
  $('.putmehere').html('');
});
于 2014-05-23T04:04:53.177 に答える