我有这段代码。
单击按钮时,必须按顺序显示红色,绿色和蓝色。但点击事件直接传播到蓝色而没有绿色。当我使用e.stopproagation时,jquery事件监听器仍然附加到不存在的元素类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basket | Placelyrics</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="index.css">
<script src="jquery.js"></script>
<script src="a.js"></script>
<script>
$(document).ready(function(){
$('.div1shown').click(function(event){
$('.red').hide();
$('.green').show();
$(this).removeClass('div1shown').addClass('div2shown');
console.log('a');
});
$('.container').delegate('.div2shown', 'click', function(event) {
$('.green').hide();
$('.blue').show();
$(this).removeClass('div2shown').addClass('div3shown');
console.log('b');
});
});
</script>
<style>
.box{
width:200px;
height:200px;
display: block;
}
.red{
background-color: red;
}
.green{
background-color: green;
display:none;
}
.blue{
background-color: blue;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="box red">
</div>
<div class="box green">
</div>
<div class="box blue">
</div>
<button class="div1shown">submit</button>
</div>
</body>
</html>
答案 0 :(得分:1)
您还需要为第一个事件处理程序使用事件委托
$(document).ready(function() {
$('.container').delegate('.div1shown', 'click', function(event) {
$('.red').hide();
$('.green').show();
$(this).removeClass('div1shown').addClass('div2shown');
console.log('a');
});
$('.container').delegate('.div2shown', 'click', function(event) {
$('.green').hide();
$('.blue').show();
$(this).removeClass('div2shown').addClass('div3shown');
console.log('b');
});
});
&#13;
.box {
width: 200px;
height: 200px;
display: block;
}
.red {
background-color: red;
}
.green {
background-color: green;
display: none;
}
.blue {
background-color: blue;
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="box red">
</div>
<div class="box green">
</div>
<div class="box blue">
</div>
<button class="div1shown">submit</button>
</div>
&#13;
当你在第一种情况下使用普通事件处理程序注册时,在注册阶段只选择一个选择器,之后永远不会评估选择器,这就是为什么即使在你更改类后第一个处理程序是被执行。但是当你使用委托事件处理程序时,目标元素选择器会被懒惰地执行,以便它可以适应稍后阶段元素的更改。
答案 1 :(得分:0)
你想要的东西是按钮,悬停和活动
你只能使用这样的css来做
input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF4D4D),
to(#FF0000));
background-image: -moz-linear-gradient(top left 90deg,#FF4D4D 0%, #FF0000 100%);
background-image: linear-gr
madient(top left 90deg, #FF4D4D 0%, #FF0000 100%);
border-radius: 30px;
border: 1px solid #FF0000;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0
rgba(255, 255, 255, .5);
cursor: pointer;
}
input[type=submit]:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#4DB870),
to(#009933));
background-image: -moz-linear-gradient(top left 90deg, #4DB870 0%, #009933 100%);
background-image: linear-gradient(top left 90deg, #4DB870 0%, #009933 100%);
}
input[type=submit]:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8),
to(#b6e2ff));
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
答案 2 :(得分:0)
$(document).ready(function () {
$('.div1shown').click(function(){
var inpVal = $(".div1shown").val();
if(inpVal==1){
$('.red').hide();
$('.green').show();
$(".div1shown").val(2);
}else if(inpVal==2){
$('.green').hide();
$('.blue').show();
$(".div1shown").val(3);
}else if(inpVal==3){
$('.blue').hide();
$('.red').show();
$(".div1shown").val(1);
}
});
});
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basket | Placelyrics</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.box{
width:200px;
height:200px;
display: block;
}
.red{
background-color: red;
}
.green{
background-color: green;
display:none;
}
.blue{
background-color: blue;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="box red">
</div>
<div class="box green">
</div>
<div class="box blue">
</div>
<button class="div1shown" value="1">submit</button>
</div>
</body>
</html>
&#13;