Fatal编程技术网
  • javascript/
  • Javascript Jquery元素类没有'；t存在，但事件仍激发

Javascript Jquery元素类没有'；t存在，但事件仍激发

javascript jquery

Javascript Jquery元素类没有'；t存在，但事件仍激发,javascript,jquery,event-handling,onclicklistener,jquery-events,Javascript,Jquery,Event Handling,Onclicklistener,Jquery Events,我有这段代码 单击按钮时，红色、绿色和蓝色必须按顺序显示，但单击事件会直接传播到蓝色，而不会传播到绿色。当我使用e.stopproagation时，jQuery事件侦听器仍然附加到不存在的元素类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Basket | Placelyrics<

我有这段代码

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


篮筐
$（文档）.ready（函数（）{
$（'.div1shown'）。单击（函数（事件）{
$（'.red'）.hide（）；
$（'.green'）.show（）；
$（this）.removeClass（'div1shown'）.addClass（'div2shown'）；
console.log（'a'）；
});
$（'.container'）.delegate（'.div2shown'，'click'，函数（事件）{
$（'.green'）.hide（）；
$（'.blue'）.show（）；
$（this）.removeClass（'div2shown'）.addClass（'div3shown'）；
console.log（'b'）；
});
});
.盒子{
宽度：200px；
高度：200px；
显示：块；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
显示：无；
}
蓝先生{
背景颜色：蓝色；
显示：无；
}
提交
您还需要对第一个事件处理程序使用事件委派

$（文档）.ready（函数（）{
$（'.container'）.delegate（'.div1shown'，'click'，函数（事件）{
$（'.red'）.hide（）；
$（'.green'）.show（）；
$（this）.removeClass（'div1shown'）.addClass（'div2shown'）；
console.log（'a'）；
});
$（'.container'）.delegate（'.div2shown'，'click'，函数（事件）{
$（'.green'）.hide（）；
$（'.blue'）.show（）；
$（this）.removeClass（'div2shown'）.addClass（'div3shown'）；
console.log（'b'）；
});
});

.box{
宽度：200px；
高度：200px；
显示：块；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
显示：无；
}
蓝先生{
背景颜色：蓝色；
显示：无；
}



提交

您需要的是按钮、悬停和活动

您只能使用这样的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%);
}




$（文档）.ready（函数（）{
$（'.div1shown'）。单击（函数（）{
var inpVal=$（“.div1shown”）.val（）；
如果（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）；
}
});
});


篮筐
.盒子{
宽度：200px；
高度：200px；
显示：块；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
显示：无；
}
蓝先生{
背景颜色：蓝色；
显示：无；
}
提交