Question

我有这段代码。

单击按钮时，必须按顺序显示红色，绿色和蓝色。但点击事件直接传播到蓝色而没有绿色。当我使用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>

Answer 1

您还需要为第一个事件处理程序使用事件委托

＆＃13;

$(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;

当你在第一种情况下使用普通事件处理程序注册时，在注册阶段只选择一个选择器，之后永远不会评估选择器，这就是为什么即使在你更改类后第一个处理程序是被执行。但是当你使用委托事件处理程序时，目标元素选择器会被懒惰地执行，以便它可以适应稍后阶段元素的更改。

Answer 2

你想要的东西是按钮，悬停和活动
你只能使用这样的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%);
}

Answer 3

＆＃13;

        $(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;

Jquery Element类不存在但事件仍然触发

3 个答案: