我有这段代码。
当点击按钮时，红色、绿色和蓝色必须按顺序显示，但点击事件直接传播到蓝色而没有绿色。当我使用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>
您需要将事件委派用于第一个事件处理程序，也用于
$(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');
});
});.box {
width: 200px;
height: 200px;
display: block;
}
.red {
background-color: red;
}
.green {
background-color: green;
display: none;
}
.blue {
background-color: blue;
display: none;
}<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>当您像在第一种情况中所做的那样使用普通事件处理程序注册时，在注册阶段只对选择器求值一次，之后再也不会对选择器求值，这就是为什么即使在更改类之后，也会执行第一个处理程序。但是，当您使用委托的事件处理程序时，目标元素选择器会延迟执行，这样它就可以适应后期发生在元素上的更改。
您想要的是按钮、悬停和活动
你只能使用这样的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%);
}
$(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);
}
});
});<!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>