使用jQuery添加类和fadeIn [英] add class and fadeIn using jquery

问题描述

我有以下代码:

$("#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设置为visibility:hidden的css，并且在应用该类时，我只是在设置样式.

I need to add the class active then fadeIn. I have css which has li'rs1 set to visibility:hidden and when the class is applied i simply style that.

我如何利用fadeIn?

How can i utilise fadeIn?

我也在构造这种权利吗? -我有13个不同的li#rs1，li#rs2 ...一直到具有不同图像映射ID的li#rs13.这就是为什么我认为我需要13个代码块.

Also am i structuring this right? - I have 13 different li#rs1, li#rs2 ... all the way to li#rs13 with different image map ids. This is why i think i need 13 blocks of code.

我有区域ID，因此需要减少代码量:

I have area ids so need need to reduce the code down:

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

推荐答案

您的选择器可以选择所有相关项，如下所示:

Your selector can pick up all the relevant items like this:

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

或者，如果您在列表中有一个ID(例如:<ul id='myUlId'>)，则更加简单:

OR, if you have an id on the list (e.g.: <ul id='myUlId'>), it's even easier:

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.

});

更新 ...或什至更容易，一口气将其覆盖！:

UPDATE ...or even easier yet, cover it all in one fell swoop!:

$("#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，请执行以下操作:

UPDATE 2
To apply to an li with an id corresponding to the hovered area:

$("#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，那么您将需要一种从包含该ID的其他属性中刮除适当数字的方法，例如href.假设href的所有内容都有规律的编号，例如没有其他编号，则可以使用

UPDATE 3 ...if the area doesn't have an id, then you'll need a way to scrape the appropriate number out of some other attribute that contains it, like an href. Say the hrefs all have the index numbers somewhere in them in a regular patter, and, say, no other numbers, then you could grab them using

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

如果您可以控制地图的标记结构，最酷的方法(HTML5，但向后兼容)是将索引放置在data-attribute属性中，如下所示:

if you have control over the map's markup structure, the coolest (HTML5, but backward-compatible) thing would be to place the indexes in a data- attribute like this:

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

然后在悬停功能内的一行中为li 的一个滑块获取一个区域，如下所示:

Then grab a slector for the li in one line inside the hover function for the area like this:

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

这篇关于使用jQuery添加类和fadeIn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！