首頁(yè) 猿問(wèn) hover和bind不能一起用么？...

hover和bind不能一起用么？為什么代碼無(wú)法實(shí)現(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">點(diǎn)擊</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貢獻(xiàn)75條經(jīng)驗(yàn) 獲得超42個(gè)贊

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

說(shuō)一說(shuō)你這段代碼的問(wèn)題：

1、語(yǔ)法錯(cuò)誤：檢查好大括號(hào)和圓括號(hào)，有報(bào)錯(cuò)

2、綁定事件寫(xiě)法的錯(cuò)誤：$("div")[i].bind這種形式是會(huì)報(bào)錯(cuò)的。明白這個(gè)問(wèn)題需要了解以下兩點(diǎn)：

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

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

$("div")[i].bind ?這種寫(xiě)法，你無(wú)意中把jquery對(duì)象轉(zhuǎn)換成了js對(duì)象，這里一定是會(huì)報(bào)錯(cuò)的，你需要再把它轉(zhuǎn)換成jquery對(duì)象才能調(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中綁定事件不需要寫(xiě)這么麻煩，不需要for循環(huán)，最后簡(jiǎ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 反對(duì) 回復(fù) 2016-05-19