在我工作的网站上，我希望用户滚动并单击图标来“打开”它们。例如，如果用户单击“关于我们”图标，它将有一段信息，他们可以在其中向上滚动并打开它们。沿着后退按钮向下移动文本。虽然当我单击后退按钮时我无法触发操作。我用 JQuery 添加了一个按钮，并添加了一个事件处理程序，按下按钮时触发一个操作，我添加了一个 id 和一个类(出于 CSS 原因)，但没有任何效果。
HTML
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/jquery.slotmachine.min.css">
</style>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id="left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png"
alt="">
</div>
<div class="middle" id="theMiddle" style="width: 400px; height: 300px">
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt=""
class="icons" id="aboutID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""
class="icons" id="jobID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png"
alt="" class="icons" id="middleID"></div>
</div>
<div id="right" class="right"><img
src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>
<script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/slotmachine.min.js"></script>
<script src="back.js" charset="utf-8"></script>
CSS:
.box{
position: relative;
width: 100px;
height: 100px;
margin: 4px;
display: inline-block;
}
div.left {
position: absolute;
left: 390px;
}
div.middle {
position: absolute;
left: 490px;
top: 150px;
}
div.right {
position: absolute;
left: 870px;
}
#left,#right{
width: 290px;
float: left;
}
#middle{
width: auto;
float: left;
}
#theMiddle{
left: 490px;
top: 150px;
}
#foo {
position: absolute;
height: 300px;
width: 400px;
left: 490px;
top: 150px;
overflow-y: scroll
}
.backButton{
position: absolute;
height: 20px;
width: 70px;
left: 490px;
top: 140px;
}
JS
document.body.style.overflow = "hidden";
//the key strokes for the up and down keys
// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
//Secret Code: EADWEARD
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
if (e.keyCode == "40") {
//this is down
//this will open it up
slot.prev();
} else if (e.keyCode == "38") {
slot.next();
}
}
//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets
slot.prev();
}
if (delta > 0) {
slot.next();
}
});
//this is for detecting clicks for the divs in the middle div
// 1 = the 2nd image , 2 = the 3rd image
$(".middle div").click(function(){
if($(this).index() == '1'){
console.log("the fucks");
$('#aboutID').fadeOut("slow", function(){
var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ").hide();
//var but = $("<button id='secondbutton'>Second button</button>");
$('#theMiddle').replaceWith(div);
$('#foo').fadeIn("slow");
//$('#theMiddle').append("<button id='secondbutton'>Second button</button>");
var btn = document.createElement("BUTTON"); // Create a <button> element
btn.className = 'backButton';
btn.id ='backButtonID';
var text = document.createTextNode("Back"); // Create a text node
btn.appendChild(text); // Append the text to
<button>
document.body.appendChild(btn); // Append <button> to
<body>
});
}if($(this).index() == '2'){
console.log("jobs page");
}
});
$(document).ready(function() {
$("#backButtonID").click(function(){
console.log("lol");
});
});
最佳答案
您可以在后退按钮实际存在于网页上之前定义后退按钮的事件处理程序。因为您在单击“.middle div”时动态构建后退按钮，所以事件处理程序的定义需要在此之后发生才能正常工作。试试这个代码片段
$(".middle div").click(function(){
if($(this).index() == '1'){
console.log("the fucks");
$('#aboutID').fadeOut("slow", function(){
var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ").hide();
//var but = $("<button id='secondbutton'>Second button</button>");
$('#theMiddle').replaceWith(div);
$('#foo').fadeIn("slow");
//$('#theMiddle').append("<button id='secondbutton'>Second button</button>");
var btn = document.createElement("button"); // Create a <button> element
btn.className = 'backButton';
btn.id ='backButtonID';
var text = document.createTextNode("Back"); // Create a text node
btn.appendChild(text); // Append the text to
document.body.appendChild(btn);
//Define the event handler here after the btn has been created
$("#backButtonID").click(function(){
console.log("lol");
});
});
}if($(this).index() == '2'){
console.log("jobs page");
}
});.box{
position: relative;
width: 100px;
height: 100px;
margin: 4px;
display: inline-block;
}
div.left {
position: absolute;
left: 390px;
}
div.middle {
position: absolute;
left: 490px;
top: 150px;
}
div.right {
position: absolute;
left: 870px;
}
#left,#right{
width: 290px;
float: left;
}
#middle{
width: auto;
float: left;
}
#theMiddle{
left: 490px;
top: 150px;
}
#foo {
position: absolute;
height: 300px;
width: 400px;
left: 490px;
top: 150px;
overflow-y: scroll
}
.backButton{
position: absolute;
height: 20px;
width: 70px;
left: 490px;
top: 140px;
}<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/jquery.slotmachine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id="left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png"
alt="">
</div>
<div class="middle" id="theMiddle" style="width: 400px; height: 300px">
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt=""
class="icons" id="aboutID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""
class="icons" id="jobID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png"
alt="" class="icons" id="middleID"></div>
</div>
<div id="right" class="right"><img
src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>
<script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/slotmachine.min.js"></script>关于javascript - 单击按钮时事件处理程序不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51333947/