Question

我正在尝试建立一个站点，但我遇到了该站点创建另一个div（DOM）的问题，但我不知道为什么。在我的HTML文件中，我只有6个div，但是一旦我在浏览器中转到元素，就会看到一个div重复。我不相信我有创建此div的任何JS代码。我所拥有的只是现有代码淡入和淡出而不是被替换，因此我的JS代码不会创建div。

重复代码

    <div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" alt="" class="icons" id="middleID"></div>

HTML代码

浏览器中的元素

document.body.style.overflow = "hidden";
//the key strokes for the up and down keys

// Set up our container
var el = document.querySelector("#theMiddle");
// Create new SlotMachine
var slot = new SlotMachine(el, {});

var count = 0;
function remove() {
  if(count == 1){

  }else {
    $('#blankID').fadeOut("slow", function() {
      $('#aboutID').fadeIn("slow", function() {


      });
    });

      count++;

  }
}
function isOnScreen(){
  if (slot.visibleTile == 3) {
        return true;
    }else{
        return false;
    }
}

function open() {
    anime({
        targets: "div.right",
        translateX: {
            value: 200,
            duration: 500
        }
    });
    anime({
        targets: "div.left",
        translateX: {
            value: -200,
            duration: 500
        }
    });
}

function close() {
    anime({
        targets: "div.right",
        translateX: {
            value: 0,
            duration: 500
        }
    });
    anime({
        targets: "div.left",
        translateX: {
            value: 0,
            duration: 500
        }
    });
}


document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == "40") {
        //this is down
        //this will open it up
        open();
        slot.prev();
        if(isOnScreen()){
          close();
        }
    } else if (e.keyCode == "38") {
        open();
        console.log(isOnScreen());
        slot.next();
        if(isOnScreen()){
          close();
        }
    }
    remove();


}

//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
    open();
    var delta = e.originalEvent.wheelDelta;
    if (delta < 0) {
        //This is for the scrolling down
        // animation opens up the brakets
        slot.prev();
        if(isOnScreen()){
          close();
        }
    }
    if (delta > 0) {
        slot.next();
        if(isOnScreen()){
          close();
        }
    }
    remove();

});


//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("lol");
  }

    if ($(this).index() == '2') {
        $('#theMiddle').fadeOut("slow", function() {
            $('#aboutTextID').fadeIn("slow", function() {});
            $("#backButtonID").fadeIn("slow", function() {});
            //Define the event handler here after the btn has been created
            $("#backButtonID").click(function() {
                console.log("back");
                $('#aboutTextID').fadeOut("slow", function() {
                    $("#backButtonID").fadeOut("slow", function() {
                        $('#theMiddle').fadeIn("slow", function() {});
                    });
                });
            });
        });
    }
    if ($(this).index() == '3') {
        $('#theMiddle').fadeOut("slow", function() {
            $('#applyButtonID').fadeIn("slow", function() {});
            $("#backButtonID").fadeIn("slow", function() {});
            //Define the event handler here after the btn has been created
            $("#backButtonID").click(function() {
                console.log("back");
                $('#applyButtonID').fadeOut("slow", function() {
                    $("#backButtonID").fadeOut("slow", function() {
                        $('#theMiddle').fadeIn("slow", function() {});
                    });
                });
            });
        });
    }
});

.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: 100px;
  overflow-y: scroll
}

#aboutTextID{
  position: absolute;
  display: none;
  height: 300px;
  width: 400px;
  left: 490px;
  top: 100px;
  overflow-y: scroll
}

.backButton{
  position: absolute;
  display: none;
  height: 20px;
  width: 70px;
  left: 490px;
  top: 90px;
}
#applyButtonID{
  position: absolute;
  display: none;
  height: 20px;
  width: 120px;
  left: 600px;
  top:200px;
}
#aboutID{
  display: none;

}
.icon-user-tie:before {
  content: "\e976";
}
.fa-map{
  color: #662c92;
  margin-left: 120px;
  margin-top: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Underscores</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

</head>
<body>
  <button type="button" name="Back" class="backButton" id="backButtonID">Back</button>


  <div id= "left" class="left">
    <img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt="">
  </div>

  <p id='aboutTextID' >"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>

<a id="applyButtonID" class="typeform-share button" href="https://bhagyeshpatel1.typeform.com/to/ytfEgw" data-mode="popup" style="text-decoration:none;background-color:#662c92;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" \
target="_blank">Launch me </a>
<script> (function() {
  var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/";
    if(!gi.call(d,id)){
      js=ce.call(d,"script");
      js.id=id;
      js.src=b+"embed.js";
      q=gt.call(d,"script")[0];
      q.parentNode.insertBefore(js,q) }
    })()
</script>
  <div class="middle" id = "theMiddle" style="width: 400px; height: 300px">
    <div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" alt="" class="icons" id="middleID"></div>
    <div><i class="fas fa-map fa-10x" size = "100px" style="width: 400px; height: 300px">     </i></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/About.png" alt="" class="icons" id="aboutID"></div>
    <div><img src="" alt="" class="icons" id="blankID" style="width: 400px; height: 300px"></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="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>

  <script src="back.js" charset="utf-8"></script>
</body>
</html>

Div复制到任何地方

0 个答案: