javascript - 多个具有不同值的不同按钮,但只使用第一个?
问题描述
我正在制作一个小型“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)的链接,我可以在其中保存工作并将其展示给你们,我将不胜感激。
解决方案
您的问题在于您的事件回调。你打电话时
$(".command_button")
你会得到一个带有这个类的三个按钮的数组。调用.val()
数组将返回第一个的值。
jQuery 中的事件回调接收一个this
关键字,该关键字引用触发事件的元素。在您的情况下,您需要使用此键来访问单击了哪个按钮。
尝试将您的代码更改为
//var button = $(".command_button").val();
var button = $(this).val();
推荐阅读
- google-sheets - 如果单元格匹配,则索引它们
- ios - _hidden 在 Crashlytics 上使用 Bitrise - iOS 应用程序崩溃
- reactjs - 如何添加到mongodb,MERN应用验证失败错误
- react-native - this.props 在类方法中未定义
- java - Android Studio:从 Github 导入项目并使用 gradle 文件重建/清理/同步后“无法解析符号 R”
- html - 在 svg 中变换椭圆
- java - 文字转语音 - Android Studio 中的 Google 地图和标记
- c# - .Net Core2.2:如何在 EF codefirst 方法中更改字符集
- python - python json删除第一个元素列表或元组
- xpath - Telegram 的即时视图 API:不支持元素