个人中心
gpt4 book ai didi

javascript - 我怎样才能让这个js应用程序使用一个 "on click event"而不是四个来运行？

转载 作者：行者123 更新时间：2023-12-01 00:56:08 24 4
gpt4 key购买 nike

我使用 javascript 已经几周了，必须制作一个简单的“ Crystal 收集器”应用程序。该应用程序按预期工作，但代码晦涩且重复。

我想让应用程序仅使用一个点击事件，而不是每个 Crystal 使用四个。我无法创建每种颜色晶体的数组并循环它们，因为 num 变量也会发生变化。

抱歉问了这么简单的问题，感谢您的建议。

下面是我的代码:

$(document).ready(function () {

    // Global variables
    
    var targetNumber;
    var num1;
    var num2;
    var num3;
    var num4;
    var userTotal = 0;
    var wins = 0;
    var losses = 0

    // Functions

    function reset() {
        num1 = Math.floor(Math.random() * 11 + 1);
        num2 = Math.floor(Math.random() * 11 + 1);
        num3 = Math.floor(Math.random() * 11 + 1);
        num4 = Math.floor(Math.random() * 11 + 1);
        targetNumber = Math.floor(Math.random() * 101 + 19);
        userTotal = 0;
        $("#total-score").text(userTotal);
        $("#target-score").text(targetNumber);
    }

    function initialize() {
        num1 = Math.floor(Math.random() * 11 + 1);
        num2 = Math.floor(Math.random() * 11 + 1);
        num3 = Math.floor(Math.random() * 11 + 1);
        num4 = Math.floor(Math.random() * 11 + 1);
        targetNumber = Math.floor(Math.random() * 101 + 19);
        $("#target-score").text(targetNumber);
        $("#wins").text(wins);
        $("#losses").text(losses);
        $("#total-score").text(userTotal);
    }
    function logic() {
        if (userTotal === targetNumber) {
            alert("You Win!");
            reset();
            wins++;
            $("#wins").text(wins);
        }
        else if (userTotal > targetNumber) {
            alert("You lose!");
            reset();
            losses++;
            $("#losses").text(losses);
        }
    }

    // Run Game (main)
    // something like...
    // var array = ["#blue","#green","#red","#yellow"]
    // for (var i =0; i < array.length;i++) {
    // }

    initialize();

    $("#blue").on("click", function () {
        userTotal = userTotal + num1;
        $("#total-score").text(userTotal);
        console.log(userTotal);
        logic();
    })

    $("#green").on("click", function () {
        userTotal = userTotal + num2;
        $("#total-score").text(userTotal);
        console.log(userTotal);
        logic();
    })

    $("#red").on("click", function () {
        userTotal = userTotal + num3;
        $("#total-score").text(userTotal);
        console.log(userTotal);
        logic();
    })

    $("#yellow").on("click", function () {
        userTotal = userTotal + num4;
        $("#total-score").text(userTotal);
        console.log(userTotal);
        logic();
    })



});
.img {
    width: 150px;
    height: 150px;
}

#crystal-main {
    width: 650px;
    border: 2px solid gray;
    padding: 25px;
    background: black;
    color: whitesmoke;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Crystal Game</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="assets/javascript/game.js"></script>
</head>

<body>
    <h1>Crystals Collector!</h1>
    <hr>
    <div class="container-fluid">
        <div class="container" id="crystal-main">
            <div class="row">
                <h2>Target Score: <span id="target-score"></span></h2>
            </div>
            <div class="row">
                <h2>Total Score: <span id="total-score"></span></h2>
            </div>
            <div class="row">
                <div class="col-3-md crystal">
                    <img src="assets/images/blue.png" alt="blue" class="img" id="blue">
                </div>
                <div class="col-3-md crystal">
                    <img src="assets/images/green.png" alt="green" class="img" id="green">
                </div>
                <div class="col-3-md crystal">
                    <img src="assets/images/red.png" alt="red" class="img" id="red">
                </div>
                <div class="col-3-md crystal">
                    <img src="assets/images/yellow.png" alt="yellow" class="img" id="yellow">
                </div>
            </div>
            <div class="row">
                <h4>Wins: <span id="wins"></span></h4>
            </div>
            <div class="row">
                <h4>Losses: <span id="losses"></span></h4>
            </div>
        </div>
    </div>

</body>
</html>

最佳答案

你可以按类添加事件监听器，所以切换到$(".img").on("click", function () {})，然后在回调函数中，检查单击的元素的 id 并执行添加逻辑。

像这样:

$(".img").on("click", function () {
    switch($(this).prop('id')){
        case "green":
           userTotal = userTotal + num2;
           break;
        case "blue":
           userTotal = userTotal + num1;
           break;
        case "red":
           userTotal = userTotal + num3;
           break;
        case "yellow":
           userTotal = userTotal + num4;
           break;
    }


        $("#total-score").text(userTotal);
        console.log(userTotal);
        logic();
});

关于javascript - 我怎样才能让这个js应用程序使用一个 "on click event"而不是四个来运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56568709/

24 4 0
文章推荐： javascript - 关于for循环中三元运算符的问题
文章推荐： python - 在不知道名称的情况下导入文件
文章推荐： python - 无法使用 Try、Except 访问第三个 URL 进行查询
文章推荐： javascript - 在javascript中通过另一个数组更改对象数组的值的更好方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com