1

これを何時間もいじった後、誰かがこれについて何らかの洞察を得ることができることを願っています。

2つのdivが並んでいます。右側には、div id=list を含むリンクのリストがあります。左側には、ホバー時に画像とリンクの説明を表示する viewarea div があります。そのため、リンクにカーソルを合わせると、左側にその div に固有の div が表示されます。ただし、これに少し自動化を追加したいと思います。

基本的に、リスト div のリンクにカーソルを合わせると、左側の div の表示が表示ブロックに切り替わります。写真と説明を表示する非表示の div id は、リスト div のリンクの title 属性と同じ名前になります。そのため、ホバーすると、リンクは、表示するタイトルと同じ id を持つ div の表示を切り替える必要があります: ブロック。

したがって、基本的に私のスクリプトのロジックは次のようになります。

リストdivのリンクにカーソルを合わせます。このリンクのタイトル属性を取得します。上記で取得した title 属性と同じ id を持つ div を (#viewarea で) 表示ブロックに変更します。

そのため、サルのリンクにカーソルを合わせると、タイトルが「サル」になり、viewarea div の div id="monkeys" の可視性が切り替わります。

大まかなhtml/cssコードは次のとおりです。

#list {
width: 480px;
float: right;
}

#viewarea {
width: 480px;
}

<div id="list">

<h1>
Animals
</h1>
<p>
<a href="monkeys_link"  title="monkeys">Monkeys</a>
</p>
<p>
<a href=”kittens_link" title="kittens">Kittens</a>
</p>
<p>
<a href="pigs_link" title="pigs">Pigs</a>
</p>

</div>

<div id="viewarea">

<div id="monkeys" style="display: none;">
<img src="picture_of_monkeys.jpg"></img>
Summary text
</div>

<div id="kittens" style="display: none;">
<img src="picture_of_kittens.jpg"></img>
Summary text
</div>

<div id="pigs" style="display: none;">
<img src="picture_of_pigs.jpg"></img>
Summary text
</div>

</div>

これが、外部jqueryスクリプトの最終的な結果です。.each のようなある種のループ構造が必要であることはわかっていますが、それを機能させることができませんでした。私は正しい軌道に乗っていますか？

$(document).ready(function() {

var title1 = $("#list a").attr("title");


$("#list a").hover(
function () {
$("#" + "title1").css("display", "block");
},
function () {
$("#" + "title1").css("display", "none");
}
);

});

長文失礼しました、どうもありがとうございました。

4

1 に答える 1

0 
$("#list")
  // On mouseenter and mouseleave, we want to react
  .on("mouseenter mouseleave", "a", function(e){
    // Find the element whose id matches our current title
    var el = $("#" + this.title);
    // Determine if we're entering or exiting the link
    switch ( e.type ) {
      // Show the element or hide the element
      case "mouseenter" : el.show(); break;
      case "mouseleave" : el.hide();
    }
  });

デモ： http： //jsbin.com/amitet/2/edit

于 2012-05-09T01:54:14.890 に答える