Javascript 使用jquery添加类和fadeIn

我有以下代码：

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

我需要添加活动类，然后添加fadeIn。我有一个css，它将

li'rs1

设置为

visibility:hidden

，当应用这个类时，我只需设置样式即可

如何使用fadeIn

我的结构是否正确我有13个不同的

li#rs1

，

li#rs2

。。。使用不同的图像地图ID一直到

li#rs13

。这就是为什么我认为我需要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
    });
});

$（“li#rs1”）

可以替换为

$（“#rs1”）

另外，如果你的id是#rs1，你不需要13块代码#rs13。您可以使用循环对项目进行迭代：

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

---

您的选择器可以拾取以下所有相关项：

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

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

var $li = $('li#' + $(this).attr('data-li-id'));

或者，如果您在列表中有一个id（例如：

），则更容易：

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

然后：

更新…或者更简单，一下子涵盖所有内容！：

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

});

更新3 …如果该区域没有id，则需要一种方法从包含该区域的其他属性（如href）中提取相应的数字。假设HREF中都有索引号，并且没有其他数字，那么您可以使用

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

如果您可以控制地图的标记结构，最酷的（HTML5，但向后兼容）方法是将索引放置在数据属性中，如下所示：

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

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

var $li = $('li#' + $(this).attr('data-li-id'));

---

我猜当地图悬停并淡入时，您正在尝试向每个区域添加一个类。在这种情况下，您可以这样做：

$("map#rade_img_map_1335255669666").hover(function(e){
    $(this).find("area").addClass("active").fadeIn("slow");
});

---

我将向所有

元素添加一个公共类和目标元素的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>...

您应该在所有rs1、rs2中添加一个公共类。。。像这样

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

---

我的问题是2-3部分。。抱歉，我编辑了它，因为我不能有不同的id。html结构是什么样子的？我知道你在说什么，如果我在所有的区域地图中放置一个id会怎么样？我编辑了我的问题，向您展示代码：同样的原则是否适用？？等等——我获取区域id的方法无效——

area#1

假设您的意思是该区域的id为“1”，而不是有效的id（id开头不允许有数字），虽然这可能会奏效，如果这是你为区域id实际得到的。。如果该区域没有ID怎么办。。有没有办法让代码继续工作？…因此，最简单的方法是确保每个li都有一个与相应区域id相同的id，+一些前缀为“rs”。因此，一个区域可能是，相应的li将是。。。那么我的最后一次更新就可以了。啊，我有15个悬停图像区域，只有14个需要显示的区域..：(

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

.inactive{visibility:hidden;}
.active{visibility:visible;}