Question

我正在使用答题器游戏中的任务系统。我不希望每个任务在页面上都显示平整：

我希望用户像“哦，很酷，这是隐藏的，只有在完成一定数量的任务后才会显示出来”。然后，我希望得到诸如特殊剑之类的奖励。我最想知道的是，在HTML中您如何才能隐藏事物，直到满足条件为止。

没有尝试过HTML / JavaScript的新内容

这是我的HTML代码：（此部分还没有任何JavaScript，但是如果我能找到一些有关如何隐藏东西的示例，请欣赏它）

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>AngularJS</title>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
  </script>
  <script >
  var app = angular.module("EmployeeManagement", []);
    app.controller("EmployeeController", function($scope, $http) {
    $scope.ShowHide = function(){
        $scope.IsVisible =  !$scope.IsVisible;
    }
  })
 </script>   
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
 <div ng-show = "IsVisible"> yes </div>
</body>
</html>

我希望任务：“ Numberofclicks”和“ Spelluses”将保持隐藏状态，直到完成这些任务或完成一定数量的任务。我的实际输出还没有，因为我不知道该怎么做。

Answer 1

好的，这很简单。

但是我们可以单击任务并显示奖励。

请注意，CSS默认情况下如何隐藏.reward个项目。

const questClicks = {};

const questClick = ({dataset: {count: c, reward : r}}) => {
  questClicks[r] += 1;
  if(questClicks[r] >= c) document.querySelector(`#${r}`).style.display = 'block';
};

document.addEventListener('click', ({target}) => {
  if(target.matches('.quest')) {
    questClick(target);
  }
});

// Init all quests
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.quest').forEach(({dataset: { reward: r }}) => questClicks[r] = 0);
});

.clicker {
  border: 1px solid red;
  border-radius: 7px;
  margin: 10px;
  padding: 10px;
}

.reward {
  display: none;
  font-weight: bold;
}

<div id='sword-quest' class='quest' data-count='5' data-reward='sword'>Click Me Lots !!</div>
<div class='reward' id='sword'>Here is a sword</div>

<div id='shield-quest' class='quest' data-count='3' data-reward='shield'>Click Me Lots !!</div>
<div class='reward' id='shield'>Here is a sword</div>

在游戏中制作任务系统。有没有办法隐藏下一个任务

1 个答案: