Jquery鼠标移入和移出、点击事件,点击变色，鼠标移出又变回原来的样式
为什么我绑定了鼠标移入和移出、点击事件，当我移入的时候改变背景色，移出是改变为原来的，点击时改变背景色，但点击之后背景色是变了，但鼠标一移开又变回去了$(document...
为什么我绑定了鼠标移入和移出、点击事件，当我移入的时候改变背景色，移出是改变为原来的，点击时改变背景色，但点击之后背景色是变了，但鼠标一移开又变回去了
$(document).ready(function(){
$("img").mouseenter(function(){
$(this).addClass("current");
}), $("img").mouseleave(function(){
$(this).removeClass("current");
});
});
$(document).ready(function(){
$("img").on('click',(function(){
for (var i = 0 ; i<$("img").length; i++) {
$(this).addClass("current");
// $("img").eq(i).removeClass("current");
} 展开
$(document).ready(function(){
$("img").mouseenter(function(){
$(this).addClass("current");
}), $("img").mouseleave(function(){
$(this).removeClass("current");
});
});
$(document).ready(function(){
$("img").on('click',(function(){
for (var i = 0 ; i<$("img").length; i++) {
$(this).addClass("current");
// $("img").eq(i).removeClass("current");
} 展开
1个回答
展开全部
发生冲突了，最好是用css直接控制了，用js反而复杂了
但是你也许是练习jquery
你可以判断下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>RunJS 演示代码</title>
<style>
.current{
border:1px solid red;
}
</style>
<script>
$(document).ready(function(){
//针对不包含clicked的class的img元素进行切换
//该选择器是动态生成的元素，故而需要delegate委派父元素处理
$("body").delegate("img:not([class*='clicked'])","hover",function(){
$(this).toggleClass("current");
});
// 点击的时候添加一个class是clicked
$("img").click(function(){
// 去除上次点击的
$("img.clicked").removeClass("clicked").removeClass("current");
// 添加当前点击的
$(this).addClass("clicked").addClass("current");
});
});
</script>
</head>
<body>
<img src="df.jpg" />
<img src="df.jpg" />
<img src="df.jpg" />
<img src="df.jpg" />
<img src="df.jpg" />
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
