javascript - JS : How to make Div's appear on click but not append? 像一个工具提示

标签 javascript

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

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

目前我只是嵌入我的升级菜单 DIV，但我宁愿将它放在单击技能时它出现的位置以进行技能选择，但在你选择技能后消失，而不是硬编码如下所示，将自身转化为技能本身。

解决此问题的最佳方法是什么？我认为我的问题是“appendChild”函数，因为它使它“坚持”到我正在应用我的 DIV 的地方。

enter image description here 

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;
.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;
}
<!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>

最佳答案

您可以使用 data-*用于存储包含“技能”描述、值的数组、对象或对象数组的属性。在 mouseenter事件地点 <button>元素切换 display “升级”<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元素。

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;
  }
}
#skill.closed {
  display: none;
}
.buttons {
  min-width: 80px;
  min-height: 30px;
  margin: 10px;
}
<!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>

关于javascript - JS : How to make Div's appear on click but not append? 像一个工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38189041/

上一篇：javascript - 循环 iMacros/JS 有问题

下一篇：javascript - 如何使用 AngularJS 将数据传递到不同的页面？

相关文章：

javascript - 使用可编辑的 div 高度更改来添加和删除其他 DOM 元素的类

包含用户输入的 Javascript 打印 Web 表单

javascript - jQuery 从索引获取关联数组键

javascript - jQuery 单击处理程序表现得很奇怪

javascript - 如何为 Atom、WhatsApp 等 Electron 应用程序添加安装屏幕？

javascript - 简单 `replace()` 的第二个参数的问题

javascript - 当图层控件移出 map 元素时，不发出 Leaflet-map 单击事件

javascript - 如何获取对动态添加元素的引用？

javascript - then() 在 Promise 之前完成

javascript - 将 NSDate 传递给 iOS 中的本地 UIWebView - Objective C

©2024 IT工具网  联系我们