1

我有以下代码：

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

我需要添加活动类然后淡入。我有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

$("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");

为了使您的fadeIn 工作，您应该使用display:none+fadeIn() 或opacity:0+fadeIn()。据我所知，visibility:hidden不适用于fadeIn()。

编辑：

如果您需要对您的区域进行其他操作，您可以应用上面编写的代码。这是您可以将 id 附加到区域的方法：

var index = 0;
$("#rade_img_map_1335255669666 area").each(function(){
    index++;
    $(this).attr("id", "areaId" + index);
})
于 2012-04-24T08:26:19.033 回答
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
应用于 li 的 id 对应于悬停区域：

$("#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.

});

更新 3 ...如果该区域没有 id，那么您需要一种方法从包含它的其他属性中刮取适当的数字，例如 href。假设hrefs都以常规模式在其中某处具有索引号，并且没有其他数字，那么您可以使用

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

如果您可以控制地图的标记结构，那么最酷（HTML5，但向后兼容）的事情就是将索引放在 data- 属性中，如下所示：

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

然后在悬停功能内的一行中为 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 回答
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 回答