具有不同值的多个不同按钮，但只使用第一个？

Question

我正在制作一个小的“RPG”CYOA，但我遇到了我的“选择框”的问题，因为只有第一选择框被用作尝试选择其他选择将导致与第一选择相同的选择结果。

我假设我需要为这些按钮的值设置一个数组，但不知道问题是否出在这个缺少的数组或其他东西上。 这是与 Jquery 混合的 Javascript。 代码错误用粗体突出显示的区域......好吧，考虑到我不能将代码中的那些以粗体放置，它将被标记为 ** **

//Use this as script 3 is raw button scenario and script 3 is raw input scenario, this script is playground for hybrid

// JavaScript Document

//SETS ALL VARIABLES FOR THE GAME

    //Mechanic Variables
    //

    //locationexplored
    currentland = "Star Nexus";
    //

    //inventory
    Basicgear = true;
    Advancedgear = false;
    //

    //Lores
    planetname = "güzel dağ" // name of planet in turkish which mean beautiful mountain, given by Indiya.
    planetnameskip = "<p>güzel dağ</p>" // same but with line break.
    planetnamebold = "<b>güzel dağ</b>" // same but with bold.
    //

    //Origins
    originmode = false
    male = false // just change what people call you, no impact on story.
    female = false // just change what people call you, no impact on story.
    blankobg = false // blank easy mode, you have no weakness but no strength.
    bountyhunterobg = false // you pay money for your faction, you have strength of prestart equipment and companions. but weakness of have to support them with credits.
    mercenaryobg = false // You get stuff for your employer, you have strength of prestart base paid by your boss. but weakness of have to get stuff for your boss.
    //

//

//"<b><br><br>Origin: I don't remember...</b> " + "<b><br><br>Origin: For the money!</b> " + "<b><br><br>Origin: My employer want me here. </b>"

//$("<p>Hello</p>").insertBefore("#placeholder_choice")
//$("<center><button id='command_button' size='50'>Origin: I don't remember...</button></center><br>").insertBefore("#placeholder_choice")
//$("<center><button id='command_button' size='50'>Bye</button></center>").insertBefore("#placeholder_choice");

$(document).ready(function() {

    $("#command_line").fadeOut(0000);
    $("#command_button_core").fadeIn(0000);

    $('<p>Welcome to Text Text 7. At any time you may type "help" for a list of commands that you can use.</p>').insertBefore("#placeholder").fadeIn(0000);

    $("<p>You woke up as alarm ranging at your ears. Groaning, you got up and look outside the viewport of your room. You look at a massive space station. Hello, welcome to the Star Nexus, that are orbiting the planet by the name of " + planetnamebold + ".</p> <p>Ahh, yes. I decide to come to this planet because it was recently discovered to have carcass of Illuminated Horror within the planet core. This give the planet the properities of magic, which make it valuable for bounty hunting for the elites. It a good place to go to for ___</p> <p>Please state your Origins for this game. Here your options. </p>").insertBefore("#placeholder").fadeIn(0000, function(){
        originmode = true;
    });

    **
    //Blank Origin
    $("<center><button class='command_button' size='50' value='Blank'>Origin: I don't remember...</button></center><br>").insertBefore("#placeholder_choice");
    //
    //Bounty Hunter Origin
    $("<center><button class='command_button' size='50' value='Bounty Hunter'>Origin: For the money!</button></center><br>").insertBefore("#placeholder_choice");
    //
    //Mercenary Origin
    $("<center><button class='command_button' size='50' value='Mercenary'>Origin: My employer want me here.</button></center><br>").insertBefore("#placeholder_choice");
    //
    **

    $(document).on("click", "#command_button_core", function() {
        $("#command_button_core").fadeOut(0000);
        $(".command_button").fadeIn(0000);
    })

    $(document).on("click", ".command_button", function() {

        var button = $(".command_button").val();

            //Set Origin to Blank
            if (button == "Blank") {
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    blankobg = true;
                    $("<p>I don't really remember why I am here, but I can tell that this is my chance for new life.</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //set origin to bounty hunter
            else if (button == "Bounty Hunter"){
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    bountyhunterobg = true;
                    $("<p>I came here with my gang to get rich!</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //set origin to mercenary
            else if (button == "Mercenary"){
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    mercenaryobg = true;
                    $("<p>My boss want me to stay here and find something fancy and valuable and deliver it to him.</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //When your origins fail
            else
                $("<p>You got this as value: "+"<b>'"+button+"'</b>"+" - but something went wrong!"+"</p>").insertBefore("#placeholder");
            //


        $("form").submit(function() {
            var input = $("#command_line").val();

            $("#console").scrollTop($("#console")[0].scrollHeight);

            $("#command_line").val("");
        });
    });
});

这是 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./style.css" rel="stylesheet" type="text/css">
    <script src="../../jQuery.js"></script>
    <script src="script2.js" type="text/javascript"></script>
    <title>Text Test 7</title>
</head>
<body>

    </div>

    <div id="container"> <!--Group everything-->

        <div id="console"> <!--All narrative elements here-->

            <p id="story_inventory"></p>

        </div>

    <div id="placeholder"></div> <!--ALLOWS CONTENT TO BE INSERTED BEFORE THIS-->



    <form onsubmit="return false;"> <!--INPUT-->

        <center><input type="text" id="command_line" size="50" autofocus="autofocus" autocomplete="off"></center>

        <br>
    </form>

    <div id="placeholder_choice"></div> <!--Allows choice to be inserted before this-->

    <center><button id="command_button_core" size="50">Next</button></center>

</div>

</body>
</html>

如果有人知道我可以给你们编辑器的链接，比如 TryItEditor，我可以在那里保存工作并向你们展示它，我将不胜感激。

Answer 1

您的问题出在您的事件回调中。 你打电话时

$(".command_button")

您将获得一个包含此类的三个按钮的数组。 在数组上调用.val()将返回第一个的值。

jQuery 中的事件回调接收引用触发事件的元素的this关键字。 在您的情况下，您需要使用此密钥来访问单击了哪个按钮。

尝试将您的代码更改为

//var button = $(".command_button").val();
var button = $(this).val();