1

次のコードがあります。

$("#rade_img_map_1335199662212").hover(function () {
     $("li#rs1").toggleClass("active");  //Toggle the active class to the area is hovered
     $("li#rs1").fadeIn("slow");
});

アクティブなクラスを追加してから、fadeIn を追加する必要があります。li'rs1に設定されたcssがありvisibility:hidden、クラスが適用されると、単にスタイルを設定します。

フェードインを利用するにはどうすればよいですか?

また、私はこの権利を構築していますか？- 私は 13 の異なる を持っていli#rs1ますli#rs2...li#rs13さまざまなイメージ マップ ID を使用しています。これが、13ブロックのコードが必要だと思う理由です。

編集:私はエリアIDを持っているので、コードを減らす必要があります:

$(document).ready(function () {
    $("map#rade_img_map_1335255669666 area#1").hover(function () {
             $("li#rs1").toggleClass("active");  //Toggle the active class to the area is hovered
    });
});
4

4 に答える 4

1

セレクターは、次のように関連するすべてのアイテムを選択できます。

var $items = $("#rs1, #rs2, #rs3, #rs4, #rs5, #rs6, #rs7, #rs8, #rs9, #rs10, #rs11, #rs12, #rs13");

または、リストに id がある場合 (例: <ul id='myUlId'>)、さらに簡単です:

var $items = $('#myUlId li');

それで：

$("#rade_img_map_1335199662212").hover(function () {
    $items.toggleClass("active").fadeIn("slow");  //Toggle the active class to the area is hovered and fade in.

});

更新...またはさらに簡単に、すべてを一挙にカバーします!:

$("#rade_img_map_1335199662212").hover(function () {
    $('#myUlId li').toggleClass("active").fadeIn("slow");  //Toggle the active class to the area is hovered and fade in.

});

更新 2
ホバー領域に対応する ID を持つ li に適用するには:

$("#rade_img_map_1335199662212 area").hover(function () {
    var areaId = $(this).attr('id'); //grab the hovered area's it
    var $li = $('li#rs' + areaId); //select an li based on the hovered area
    $li.toggleClass("active").fadeIn("slow");  //Toggle the active class  and fade in.

});

UPDATE 3 ...エリアにIDがない場合は、hrefなど、それを含む他の属性から適切な番号をスクレイピングする方法が必要になります。すべての href のどこかに通常のパターンでインデックス番号があり、たとえば、他の番号がない場合は、次を使用してそれらを取得できます。

var href = $(this).attr('href');
var id = href.match(/\d+/)

マップのマークアップ構造を制御できる場合、最もクールな (HTML5 ですが下位互換性がある) 方法は、次のように data- 属性にインデックスを配置することです。

    <area data-li-id="4">

次に、次のように、領域のホバー関数内の1 行で li のセレクターを取得します。

var $li = $('li#' + $(this).attr('data-li-id'));
于 2012-04-24T08:29:02.553 に答える
1

マップがホバーされてフェードインしたときに、各エリアにクラスを追加しようとしていると思います。その場合、次のようにできます。

$("map#rade_img_map_1335255669666").hover(function(e){
    $(this).find("area").addClass("active").fadeIn("slow");
});
于 2012-04-24T08:30:21.180 に答える
1

$("li#rs1")で置き換えることができます$("#rs1")。

また、ID が #rs1 ... #rs13 の場合、13 ブロックのコードは必要ありません。ループを使用してアイテムを反復処理できます。

for (i = 1; i <= 13; i++) $("#rs" + i) /* code here*/

同じアイテムに対するアクションに連鎖を使用できます。

for (i = 1; i <= 13; i++) $("#rs" + i).toggleClass("active").fadeIn("slow");

フェードインを機能させるには、いずれかdisplay:none+ fadeIn()、またはopacity:0+ fadeIn() を使用する必要があります。私の知る限り、visibility:hiddenfadeIn() では機能しません。

編集：

自分の領域で他のアクションを実行する必要がある場合は、上記のコードを適用できます。これは、ID を領域に追加する方法です。

var index = 0;
$("#rade_img_map_1335255669666 area").each(function(){
    index++;
    $(this).attr("id", "areaId" + index);
})
于 2012-04-24T08:26:19.033 に答える
0

<map>すべての要素に共通のクラスとターゲット要素の id をデータ属性として追加します

<map id="rade_img_map_1335255669666" name="rade_img_map_1335255669666" class="hover_map" data-targetid="rs1">
  <area href="#" coords="10,10,162,48" shape="RECT" />
  <area href="#" coords="30,4,112,18" shape="RECT" />
</map>
<map id="rade_img_map_1335255669667" name="rade_img_map_1335255669667" class="hover_map" data-targetid="rs2">
  <area href="#" coords="10,10,162,48" shape="RECT" />
  <area href="#" coords="30,4,112,18" shape="RECT" />
</map>
...<etc>...

単一のjqueryブロックを使用してすべてのケースを処理します

$("map.hover_map").hover(function () {
     var targetId = $(this).data('targetid'),
         targetElement = $('#' + targetId);
     targetElement.toggleClass("active");  //Toggle the active class to the area is hovered
     if ( targetElement.is('active') ) {
        targetElement.css({opacity:0}).animate({opacity:1});
     }
});

すべてのrs1、rs2に共通のクラスを追加する必要があります...このように

<div id="rs1" class="inactive">...</div>
<div id="rs2" class="inactive">...</div>

そしてあなたのCSSは

.inactive{visibility:hidden;}
.active{visibility:visible;}
于 2012-04-24T08:47:17.993 に答える