1

私は会社の昇進のためのウェブサイトを構築しています、そして24の別々のdivを開くページに24の地図の形の「ホットスポット」があります。私のデザインではありませんが、私は自分の主張を主張するのに十分な高さではないので、それを使用します。同僚によって書かれたコードは恐ろしいです（少なくとも私はそう思います）---

$(".hover1").mouseenter(function(){
    $(".winner1").fadeIn();
}).mouseleave(function(){
    $(".winner1").stop().fadeOut();
});

（x24）

24の異なる「ホットスポット」とdivすべて。つまり、それぞれが「.hover2」、「。hover3」などに変わることを想像できます。「。winner2」、「。winner3」なども同じです。

このコードは約120行です。

私の質問は、私は長い目で見ればjQueryの専門家ではないので、これを単純化する方法はありますか？私は方法がなければならないことを知っています、私はそれを知りません。

各divとホットスポットには、「hover1」/「winner1」、「hover2」/「winner2」などのラベルが付けられ、そのように接続されています。

よろしくお願いします。

:-)

編集

これがHTMLです

地図について

<map name="Map">
    <area shape="rect" coords="6,1,258,232" class="hover1"/>
</map>

その上にカーソルを合わせると、これが表示されます

<div class="winner1 badge male">
    <div class="winnerText">
        <p><span>Winner:</span> Clay Cauley</p>
        <p><span>Date:</span> December 3<sup>rd</sup>, 2012</p>
        <p><span>Prize:</span> XBOX 360</p>
    </div>
</div>
4

4 に答える 4

2

.hoverと.winnerの一意のクラスの代わりに、次のようなマークアップを実行します。

<div class="container">
    <div class="hover">
        Hovercontent #1
    </div>

    <div class="winner">
        Winnercontent #1
    </div>
</div>

<div class="container">
    <div class="hover">
        Hovercontent #2
    </div>

    <div class="winner">
        Winnercontent #2
    </div>
</div>

そして、JavaScriptを次のように記述します。

$('.hover').on('mouseenter', function() {
    $(this).siblings('.winner').fadeIn();
}.on('mouseleave', function() {
    $(this).siblings('.winner').stop().fadeOut();
});
于 2012-11-28T15:05:33.853 に答える
2

HTMLを修正できると仮定して、これを試してください。

<map name="Map">
    <area shape="rect" coords="6,1,258,232" class="hover" data-target="winner1" />
    <area shape="rect" coords="2,2,2,2" class="hover" data-target="winner2" />
    <area shape="rect" coords="3,3,3,3" class="hover" data-target="winner3" />
    <area shape="rect" coords="4,4,4,4" class="hover" data-target="winner4" />
    <area shape="rect" coords="5,5,5,5" class="hover" data-target="winner5" />
</map> 

$(".hover").hover(function() {
    $("." + $(this).data("target")).fadeIn();
},
function() {
    $("." + $(this).data("target")).stop().fadeOut();
});
于 2012-11-28T15:15:30.063 に答える
0

mousenterイベントとmouseleaveイベントをすべてのホットスポットにアタッチし、関数で表示/非表示にするdivを決定できます。これは、それらが「ラベル付けされている」と言うとき、それがidまたはその他のHTML属性であることを意味することを前提としています。何かのようなもの -

$("map").mouseenter(function(event){
    var index = [some function to find the index of the event.target]; // For example, the index of "hover1" is 1
    $("winner" + index).fadeIn();
}).mouseleave(function(event){
   var index = [some function to find the index of the event.target];
   $("winner" + index).stop().fadeOut();
})

Javascriptの文字列解析関数は、IDなどからインデックスを解析するために簡単に見つけることができるはずです。

于 2012-11-28T15:10:14.183 に答える
0

HTMLを変更することができず、クラスがシーケンスを形成する場合でも、ハンドラーをループでアタッチできます。".winner"+iハンドラーの反復変数（または連結された文字列）の値をキャプチャすることを忘れないでください。

for(i=1;i<=24;i++){
  (function(i){
    $(".hover"+i).mouseenter(function(){
      $(".winner"+i).fadeIn();
    }).mouseleave(function(){
      $(".winner"+i).stop().fadeOut();
    });
  }(i);
};
于 2012-11-28T15:15:29.423 に答える