Question

我删除刚创建的对象时遇到问题，我的意思是我设置一个if语句，如果我点击并且元素移动到特定区域，屏幕上显示跨距和div，但是如果我离开这个区域并且if语句不再是真的，我希望这些跨度消失。我试图通过它不想工作来删除它

任何提示如何使其发挥作用？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adventure Game</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

<ul class="slider">
    <li><img src="images/zero/DSC_0732.JPG"></li>
    <li><img src="images/jeden/DSC_0757.JPG"></li>
    <li><img src="images/dwa/DSC_0786.JPG"></li>
    <li><img src="images/trzy/DSC_0793.JPG"></li>
    <li><img src="images/cztery/DSC_0750.JPG"></li>
</ul>


<div id="emptySpace">
    <span class="opisujacyX">X to :</span>
    <span class="opisujacyY">Y to :</span>
    <span class="left"></span>
    <span class="right"></span>
</div>


<div id="boxMap">
    <img id="flower" src="images/poboczne/rose-2418774_960_720.png" alt="flower">
    <img id="book" src="images/poboczne/programista-samouk-profesjonalny-przewodnik-do-samodzielnej-nauki-kodowania-w-iext51993595.png" alt="book">
    <img id="list" src="images/poboczne/Zrzut%20ekranu%202018-06-10%20o%2014.24.04.png" alt="list">
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="js/app.js"></script>
</body>
</html>

CSS

.girlFirstMessage, .girlSecondMessage {
  background-color: #3affa0;
  width: 300px;
}
.giveFlower {
  background-color: red;
  margin-right: 10px;
  font-size: 140%;
  cursor: pointer;
}
.walkAway {
  background-color: blue;
  font-size: 140%;
  cursor: pointer;

}

的JavaScript

function launchGirlEvent（e）{

if (counter == 2) {
    var book = document.querySelector("#book");
    var xPosition = e.offsetX - (heroMovement.offsetWidth - 55);
    var yPosition = e.offsetY - (heroMovement.offsetHeight - 55);
    var messagePlace = $("#emptySpace");
    var girlFirstMessage = $("<div>", {
        text: „Text",
        class: "girlFirstMessage"
    });
    var yes = $("<span>", {
        text: „cheer up",
        class: "giveFlower"
    })
    var no = $("<span>", {
        text: "leave",
        class: "walkAway"
    })
    var thanks = $("<span>", {
        text: "Thanks",
        class: "walkAway"
    })

    if (xPosition > 630 && xPosition < 810 &&
        yPosition < 135 && yPosition > 0) {

        messagePlace.append($(girlFirstMessage));
        if ((items.length - 1) == 0) {
            messagePlace.append($(yes));
            yes.on("click", function () {

                items.splice(0);
                var girlSecondMessage = $("<div>", {
                    text: „Another text",
                    class: "girlSecondMessage"
                });
                messagePlace.append($(girlSecondMessage));
                items.push(book);
               messagePlace.append(thanks)
            })

            messagePlace.append($(no));
        } else {
            messagePlace.append($(no));
        }
    }
    // else {
    //     messagePlace.remove($(girlFirstMessage));
    //     messagePlace.remove($(yes));
    //     messagePlace.remove($(no));
    // }
}

}

如果if语句不再为true，则使用jQuery删除对象

0 个答案: