首頁猿問 hover和bind不能一起用么？...

hover和bind不能一起用么？為什么代碼無法實現(xiàn)？

JavaScript JQuery

qq_吃藥先森_03169839 2016-05-18 15:39:12

<!DOCTYPE?html> <html?xmlns="http://www.w3.org/1999/xhtml"> ????<head> ????????<title>hover()方法切換事件</title> ????????<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"?type="text/javascript"></script> ????????<link?href="style.css"?rel="stylesheet"?type="text/css"?/> ????</head> ???? ????<body> ????????<h3>hover()方法切換事件</h3> ????????<div?id="123">別走！你就是土豪</div> ????????<div?id="aaa">點擊</div> ????????<p?style="display:none"?id="fk"?>666</p> ????????<script?type="text/javascript"> ???????? ????????????$(function?()? ????????????{ ????????????????x=$("a"); ????????????????for(i=0;i<x.length;i++) ????????????????{ ????????????????????$("a")[i].bind("click",function() ????????????????????{ ????????????????????????$("p").css({"display":"block"}); ????????????????????}) ????????????????????$("a")[i].hover ????????????????????( ????????????????????????function?()?{ ????????????????????????????$(this).addClass("orange"); ????????????????????????}, ????????????????????????function?()?{ ????????????????????????????$(this).removeClass("orange"); ????????????????????????} ????????????????????) ????????????????} ????????????) ???????????? ????????????}; ????????</script> ????</body> </html>

查看完整描述

4 回答

已采納

鬧小志

TA貢獻75條經(jīng)驗獲得超42個贊

首先需要明確，bind和hover只是兩種不同的綁定事件的形式，他們之間沒有任何沖突。

說一說你這段代碼的問題：

1、語法錯誤：檢查好大括號和圓括號，有報錯

2、綁定事件寫法的錯誤：$("div")[i].bind這種形式是會報錯的。明白這個問題需要了解以下兩點：

（1）bind是jquery對象的方法，js對象不具備bind方法，調(diào)用會報錯

（2）jquery對轉(zhuǎn)換js對象轉(zhuǎn)換有兩種辦法一個是$("***").get(0)形式，一個是$("***")[0]這種形式

$("div")[i].bind ?這種寫法，你無意中把jquery對象轉(zhuǎn)換成了js對象，這里一定是會報錯的，你需要再把它轉(zhuǎn)換成jquery對象才能調(diào)用bind，例如：

$($("div")[i]).bind

改造之后的代碼：

$(function?()?{
????????????????x=$("div");
????????????????for(i=0;i<x.length;i++){
????????????????????$($("div")[i]).bind("click",function()
????????????????????{
????????????????????????$("p").css({"display":"block"});
????????????????????});
????????????????????$($("div")[i]).hover(function()
????????????????????{
????????????????????????$(this).addClass("orange");
????????????????????},function(){
????????????????????????$(this).removeClass("orange");
????????????????????});
????????????????}
????????????});

3、優(yōu)化：在jquery中綁定事件不需要寫這么麻煩，不需要for循環(huán)，最后簡化之后的代碼如下：

$(function?()?{
????????????????$("div").bind("click",function(){
????????????????????$("p").css({"display":"block"});
????????????????});
????????????????$("div").hover(function()
????????????????????{
????????????????????????$(this).addClass("orange");
????????????????????},function(){
????????????????????????$(this).removeClass("orange");
????????????????????});
????????????});

4、建議你也了解一下用bind綁定事件和直接用hover這種形式綁定事件的區(qū)別

6 反對回復(fù) 2016-05-19