Question

我正在尝试使用HTML，JavaScript和JQuery（以及CSS）制作一个“选择你自己的冒险”游戏。我希望能够为玩家的角色设置值，例如性别（男/女），头发颜色（黑色，棕色，金色，红色）等。目前，我有<a> </a>个标签，其中包含特殊ID他们一直在尝试使用JQuery根据点击的内容设置JavaScript变量。有没有建议的方法来做到这一点，或更好的方法来做到这一点？有关示例代码，请转到此处https://jsfiddle.net/Bob_Bobstien/5fdzhnw8/1/或查看以下内容：示例代码：

    <h3 id="gender">Are you a <a href="#" id="boy" class="genderchoice">boy</a> or a <a href="#" id="girl" class="genderchoice">girl</a>?</h3>

这里的JQuery / JavaScript不起作用（我是JavaScript / Jquery的新手，如果你不知道的话）：

    $('#boy').click(function(){
    gendervalue=male
});
$('#girl').click(function(){
    gendervalue=female
});

我已经做了一些窥探并且认为这个设置可能工作，但显然不是，这个值一直未定义。我已经在JQuery document.ready thing：

之后的脚本中更早地定义了变量

$(document).ready(function(){
var gendervalue;
$(otherJquery).things

同样，我在一个类似的问题中看到了这一点，但也许在这种情况下不起作用。

Answer 1

尝试jquery点击处理程序和选择器：

var gendervalue;
$(function() {
  $('a.genderchoice').on('click', function() {
    gendervalue = this.id === "boy" ? "Male" : "Female";
    alert(gendervalue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3 id="gender">Are you a <a href="#" id="boy" class="genderchoice">boy</a> or a <a href="#" id="girl" class="genderchoice">girl</a>?</h3>

Answer 2

您可以将onclick事件处理程序分配给将触发功能的按钮，将黑色值分配给头发等。正如评论部分中提到的@xufox，您可以使用localstorage在本地保存这些值，然后在需要时进行检索，这可以为您的代码添加Save Game功能。如果您可以提供您的代码，那么所有这些都可以借助它来解释。

使用纯JavaScript：

 var genderValue;
 var boy = document.getElementById("boy");
 var girl = document.getElementById("girl");

 boy.onclick = myfunc;
 girl.onclick = myfunc;

 function myfunc(){
 if(this.id == "girl"){
 genderValue = "female";
 }else{
 genderValue = "male";
   }
 }

使用jQuery代码：

$('#boy').on('click',function(){
var genderValue = "male";
});

$('#girl').on('click',function(){
var genderValue = "female";
});

您必须将genderValue的值分配给字符串，并且字符串始终在引号内，这就是错误。

适用于localStorage：

if(localStorage.getItem("genderValue") == null){

$('#boy').on('click',function(){
var genderValue = "male";
localStorage.setItem("genderValue","male")
});

$('#girl').on('click',function(){
var genderValue = "female";
localStorage.setItem("genderValue","female");
});
}else{
var genderValue = localStorage.getItem("genderValue");
}

localStorage用于在用户的计算机上保存值。如果您的游戏需要很多天才能完成，此功能非常有用。在上面的代码中，如果用户第一次没有访问，将从用户的计算机中检索genderValue。但是按钮仍然可见，因为我们没有编写代码来隐藏它们。如果您需要该功能，请在评论部分写下。

有关详细说明和用法，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage。

Answer 3

不确定您是如何计划设置的，但如果您将使用角色创建类型的东西，则可能需要使用表单来包含所有自定义。用户完成后，提交按钮会将表单ID发送给构造函数，然后构造函数可以创建角色并将其信息存储在任何您希望的位置（例如在全局命名空间中）。请参阅下文或点击JSBin。

HTML：

<form id="characterAttributes">
  Character Name: <input type="text" name="name">
  <input type="radio" name="gender" value="male" checked>Male
  <input type="radio" name="gender" value="female">Female
  <input type="radio" name="gender" value="other">Other
  <input type="button" 
         value="Create Player" 
         onClick=setPlayerAttributes("characterAttributes")>
</form>

JS：

window.myGameName = { // creates a global namespace to store game variables in
  characters: {}, // create a container for characters
  settings: [] // etc etc etc
};

var setPlayerAttributes = function(form) {
  var myForm = document.getElementById(form),
      charName = myForm.elements.namedItem("name").value,
      charGender = myForm.elements.namedItem("gender").value;
  if (typeof charName === 'string') {
    myGameName.characters[charName] = {
      name: charName,
      gender: charGender,
      hp: 100, // plus any other attributes you want to initialize
      mp: 100  // etc etc etc
    };
  }
};

使用HTML，JavaScript和JQuery，如何通过单击为变量赋值？

3 个答案: