您好,登錄后才能下訂單哦!
這篇文章主要介紹了jquery怎么給類添加事件的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇jquery怎么給類添加事件文章都會有所收獲,下面我們一起來看看吧。
jquery可以通過選擇器選擇一類的標簽集合。然后通過$(this)指向當前對象。
$("#ul li")這個可以獲取id為ul下的所有的li 當鼠標經過某個li是使用$(this)表示當前的li對象在進行操作。
每個li都添加mouseover可以理解為 每個li都觸發mouseover事件。
例如:
123
$("#ul li")。mouseover(function(){//jquery的mouseover事件
alert($(this)。index());//彈出每個li的的位置
//這樣就能實現每個li都綁定mouseover事件
});
這應該是簡單的滑動門效果。
HTML的結構估計就是你這樣了,左邊是列表,右邊是div組。
其實,你只要明白,左邊的列表和右邊的div組都是有索引值(index)的。然后通過一個變量來控制就可以了,這樣這個變量即可以給左邊的列表用,也可以給右邊的按鈕用。var int=0; //初始化一個變量
//定義一個函數,用來隱藏顯示右側的div和控制左側的列表
function divShow(int){
$('#right .item')。hide()。eq(int)。show();
$('#left li')。removeClass('current')。eq(int)。addClass('current');
}
我們需要給左側的列表添加事件;$('#left li')。bind({
'mouseover' : function(){
//獲取當前元素的索引值
int=$(this)。index();
//執行函數,這里會顯示右側的第一個div元素
divShow(int);
},
'mouseout' : function(){
//鼠標劃開時的操作
//int=0;
//divShow(int);
}
});
側邊的按鈕也是一樣//上翻
$('#prev')。bind({
'click' : function(){
//這里要使用判斷
if(int <=0){
//這里的個數可以拿到外面定義;
int=($('#right .item')。length-1);
}else{
int=(int-1);
};
int=int;
}
});
//下翻
$('#next')。bind({
'click' : function(){
//這里要使用判斷
if(int >=($('#right .item')。length-1)){
//這里的個數可以拿到外面定義;
int=0;
}else{
int=(int+1);
};
int=int;
}
});
關于“jquery怎么給類添加事件”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“jquery怎么給類添加事件”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。