Question

这对我来说有点难以解释所以我会尽我所能。我正在开发一个小型游戏，其中角色将拥有8种攻击敌方玩家的技能，并且我想实现一个系统，当你点击升级时，子菜单系统弹出或显示打开你可以选择3种技能之一将该特定技能升级为。

我遇到的问题是我已经完成了设计并实施了，但是当我点击按钮时，我不太确定如何制作它，升级菜单会出现在你点击的地方。

目前我只是嵌入了我的升级菜单DIV，但我宁愿把它放在哪里当你点击一个技能时它会出现技能选择，但是当你选择你的技能后它会消失而不是将自己硬编码到技能本身，如下所示。

最好的办法是什么？我认为我的问题是＆＃34; appendChild＆＃34;功能，因为它使它＆＃34;坚持＆＃34;我正在将我的DIV用于。

＆＃13;

New=Object.create;

dom = {
	el: function (id){
		return document.getElementById(id);
	},
	setText: function (id,text) {
		this.el(id).innerHTML = text;
	},
	setTextCon: function (id,text){
		this.el(id).innerHTML += text;
	}
}


function upgradeBar() {
	 menu("upgradeMenu", "systemMenu");
 }
 
 
 function menu(classID, id) {
		var button = dom.el("skill"); // Apply DIV to THIS location
		var x = document.createElement("div");
		x.setAttribute("class", classID);
		x.setAttribute("id", id);
		button.appendChild(x);
		
	function skills(classID, id, title){
		var circle = dom.el("systemMenu"); // Apply DIV to THIS location
		var x = document.createElement("div");
		x.setAttribute("class", classID);
		x.setAttribute("id", id);
		x.setAttribute("title", title);
		circle.appendChild(x);
//		dom.setText(id, text);
		}
	skills("skills", "attack1", "Strike 1");	
 	skills("skills", "attack2", "Strike 2");	
	skills("skills", "attack3", "Strike 3");	 
}

dom.el("skill").onclick = upgradeBar;

＆＃13;

.upgradeMenu {
	background-image: url("/home/shawnmusick/Documents/Card Warriors/images/triblack.jpg");
	width: 100px;
	height: 100px;
	background-color: white;
	border: 1px solid black;
	border-radius: 50px;
	position: relative;
}

#attack1 {
	background-image: url("");
	width: 50px;
	height: 50px;
	background-color: white;
	border: 1px solid black;
	border-radius: 50px;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -10px;
	z-index: 1;
}

#attack2 {
	background-image: url("");
	width: 50px;
	height: 50px;
	background-color: white;
	border: 1px solid black;
	border-radius: 50px;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: -10px;
	z-index: 1;
}
#attack3 {
	background-image: url("");
	width: 50px;
	height: 50px;
	background-color: white;
	border: 1px solid black;
	border-radius: 50px;
	position: absolute;
	bottom: 0;
	margin-left: 23px;
	margin-bottom: -15px;
	z-index: 1;
	
}

.buttons {
	min-width: 80px;
	min-height: 30px;
	margin: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>

	<head>
		<title>Arena Brawl</title>
		<meta content="text/html" charset="utf-8"</meta>
		<link href="css/game.css" rel="stylesheet">
	</head>

	<body>
      
      <button id="strike" type="button" class="buttons">Strike</button>
							<button id="cure" type="button" class="buttons">Cure</button>
							<button id="defend" type="button" class="buttons">Defend</button>
							<button id="debuff" type="button" class="buttons">Debuff</button>

							<button id="strike2" type="button" class="buttons">Strike2</button>
							<button id="cure2" type="button" class="buttons">Cure2</button>
							<button id="defend2" type="button" class="buttons">Defend2</button>
							<button id="debuff2" type="button" class="buttons">Debuff2</button>
							
							<button id="skill" type="button" class ="buttons" > Upgrade Me </button>
      
      
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>		</body>

</html>

＆＃13;

Answer 1

您可以使用data-*属性来存储包含＆＃34;技能＆＃34;的对象的数组，对象或数组。描述，价值观。 mouseenter事件<button>事件切换display＆＃34;升级＆＃34; <fieldset>元素;为disabled元素设置button属性，为点击的button元素保存;删除所有mouseeneter元素的button个事件;使用已点击的<input type="button">元素.value属性设置的值填充.title元素<button>，data-*。在click <input type="button">元素处，将.value元素推送到引用当前用户的对象;将fieldset元素display设置为none，删除.value个元素的当前input，将mouseeneter个事件添加到button元素。< / p>

＆＃13;

function CreateUser(name) {
  name = name.toString();
  if (name === undefined || name == "") {
    throw new Error("CreateUser: name required")
  }
  this.name = "user" + name;
  this.skills = [];

};

var skill = document.getElementById("skill");
var label = skill.querySelector("label");
var opts = skill.querySelectorAll(".options");
var close = document.getElementById("close");
var buttons = document.querySelectorAll(".buttons");

var user0 = new CreateUser(0);
initSkillsUpgrade("add", user0);

function initSkillsUpgrade(toggleHandler, user) {
  for (var i = 0; i < buttons.length; i++) {
    buttons[i][toggleHandler + "EventListener"]
    ("mouseenter", handleMouseEnter.bind(buttons[i], user))
  }
}

function handleMouseEnter(user, e) {
  var not = document.querySelectorAll(".buttons:not(#" + e.target.id + ")");
  toggle(not, true);
  toggle(skill);
  initSkillsUpgrade("remove");
  var all = [].slice.call(not).concat(e.target);
  var skills = JSON.parse(e.target.dataset.skills);
  skill.className = "";
  label.innerHTML = "Add a " + e.target.textContent + " skill:";
  skills.forEach(function(opt, index) {
    // alternatively, dynamically create `<input type="button">`
    // elements here, corresponding to `.length` of `skills` array
    if (typeof opt === "object") {
      var key = Object.keys(opt)[0];
      opts[index].title = opt[key];
      opts[index].value = key;
    } else {
      opts[index].title = "Does " + opt + " stuff";
      opts[index].value = opt;
    }

    opts[index].onclick = function(optsEvent) {
      if (user.skills.indexOf(optsEvent.target.value) === -1) {
        user.skills.push(optsEvent.target.value);
        alert(user.name + " added " 
            + optsEvent.target.value 
            + " skill. Current skills: " 
            + JSON.stringify(user.skills));
      } else {
        alert(user.name + " has " 
             + optsEvent.target.value 
             + " skill, select anoter skill. Current skills:" 
             + JSON.stringify(user.skills)
             )
      }
      
      label.innerHTML = "";
      for (var n = 0; n < opts.length; n++) {
        opts[n].value = "";
      }
      toggle(skill);
      toggle(all, false);
      initSkillsUpgrade("add", user);
    }
  });
}

close.addEventListener("click", function() {
  for (var n = 0; n < opts.length; n++) {
    opts[n].value = "";
  };
  toggle(skill);
  toggle(buttons, false);
  initSkillsUpgrade("add", user0);
});

function toggle(elems, bool) {
  if (elems.id === "skill") {
    if (elems.className === "closed") {
      elems.className = "";
    } else {
      elems.className = "closed"
    }
    return;
  }

  for (var j = 0; j < elems.length; j++) {
    elems[j].disabled = bool;
  }
}

＆＃13;

#skill.closed {
  display: none;
}
.buttons {
  min-width: 80px;
  min-height: 30px;
  margin: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Arena Brawl</title>
  <meta content="text/html" charset="utf-8" />
</head>
<body>
  <!-- object value within `JSON` array at `data-skills` -->
  <button id="strike" type="button" class="buttons" 
    data-skills='[{"strike1":"does strike1 stuff"},
                 "strike2",
                 "strike3"]'>Strike</button>
  <button id="cure" type="button" class="buttons" 
    data-skills='["cure1",
                 "cure2",
                 "cure3"]'>Cure</button>
  <button id="defend" type="button" class="buttons" 
    data-skills='[{"defend1":"does defend1 stuff"},
                 "defend2",
                 "defend3"]'>Defend</button>
  <button id="debuff" type="button" class="buttons" 
    data-skills='["debuff1",
                 "debuff2",
                 "debuff3"]'>Debuff</button>
  <button id="strike2" type="button" class="buttons" 
    data-skills='["strike2a",
                 "strike2b",
                 "strike2c"]'>Strike2</button>
  <button id="cure2" type="button" class="buttons" 
    data-skills='["cure2a",
                 "cure2b",
                 "cure2c"]'>Cure2</button>
  <button id="defend2" type="button" class="buttons" 
    data-skills='["defend2a",
                 "defend2b",
                 "defend2c"]'>Defend2</button>
  <button id="debuff2" type="button" class="buttons" 
    data-skills='[{"debuff2a":"does debuff2a stuff"},
                 "debuff2b",
                 "debuff2c"]'>Debuff2</button>
  <br>
  <fieldset id="skill" class="closed">
    <button id="close">close menu</button>
    <br/>
    <hr/>
    <label>Add a skill:</label>
    <input type="button" class="options" value="">
    <input type="button" class="options" value="">
    <input type="button" class="options" value="">
  </fieldset>
  <!--
    <button id="skill" type="button" class="buttons">Upgrade Me</button> 
  -->
</body>
</html>

＆＃13;

JS：如何让Div显示在点击但不附加？就像一个工具提示

1 个答案: