我希望单击图片后图片会出现红色的边框,再次点击边框消失。这段代码有什么问题?该怎么改?有没有更好的实现方法?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JqueryTest_4</title>
<script src="scripts/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#imgSet img").click(function(){
this.toggleClass("select");
});
})
</script>
<style type="text/css">
body {
background-repeat: repeat-x;
margin: 8px;
color: #2a523c;
background-color: #ade3ef;
}
body, th, td {
font-family: Verdana,sans-serif;
font-size: 10px;
}
fieldset {
margin-bottom: 12px;
border-color: #00457b;
background-color: #cfeace;
}
legend {
border: 2px ridge #00457b;
font-weight: bold;
background-color: #e36a51;
color: white;
padding: 2px 16px;
}
.select
{
border:solid 2px red;
}
</style>
</head>
<body>
<fieldset id="imgSet">
<legend>图片集</legend>
<img id="img1" src="Images/image.1.jpg" />
<img src="Images/image.2.jpg" />
<img src="Images/image.3.jpg" />
<img src="Images/image.4.jpg" />
<img src="Images/image.5.jpg" />
<img src="Images/image.6.jpg" />
<img src="Images/image.7.jpg" />
</fieldset>
</body>
</html>
你用addClass和removeClass试试
this.toggleClass("select");改成$(this).toggleClass("select");
$(this)才是jquery对象 ,才能调用jquery的方法。
现在你这里的this是window对象吧?
楼主主要是混淆了dom对象和jquery对象.
下面这段代码的第二行是有问题的.
$("#imgSet img").click(function(){
this.toggleClass("select");
});
如果想要使用该方法,需要使用$(this)来进行包装,将其转换为jquery对象才行.