Question

我想做什么：

我想点击一个div，然后将该类＆＃34;隐藏我＆＃34;点击后添加到它。这有效地隐藏了div。
这些div都是一个接一个堆叠起来的（想想Tinder，你看到一张个人资料卡后的个人资料）
我希望能够点击一个按钮（＆＃34;撤消＆＃34;），这将只返回我之前点击的最后一个div 。

我关心的是javascript部分！

这就是我所做的：

  HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }}}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }}}

    HTMLElement.prototype.removeClass = function(string) {
      if (!(string instanceof Array)) {
        string = string.split(' ');
      }

      for(var i = 0, len = string.length; i < len; ++i) {
        this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
      }}

var hideMe = function(){
    document.getElementById("card").toggleClass("hide-me");} 

var undo = function(){
document.getElementById("card").removeClass("hide-me");}

Answer 1

您可能想要执行以下示例。您可以保留隐藏div的数组堆栈，撤消功能将取消隐藏数组中的最后一项。

＆＃13;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }}}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }}}

    HTMLElement.prototype.removeClass = function(string) {
      if (!(string instanceof Array)) {
        string = string.split(' ');
      }

      for(var i = 0, len = string.length; i < len; ++i) {
        this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
      }}

var undoButton = document.getElementById('undo');
var hiddenStack = [];
var hideMe = function(elem){
    undoButton.removeClass("hide-me");
    elem.parentNode.toggleClass("hide-me");
    hiddenStack.push(elem.parentNode);
} 

var undo = function(){
  var elem = hiddenStack.pop() || null;
  if(elem)
    elem.removeClass("hide-me");
  if(!hiddenStack.length)
    undoButton.addClass('hide-me');
}

＆＃13;

.hide-me {
    display: none; 
 }

＆＃13;

<button id="undo" class="hide-me" onclick="undo()">Undo</button>
<div>Profile 1 <button onclick="hideMe(this)">Hide</button></div>
<div>Profile 2 <button onclick="hideMe(this)">Hide</button></div>
<div>Profile 3 <button onclick="hideMe(this)">Hide</button></div>
<div>Profile 4 <button onclick="hideMe(this)">Hide</button></div>
<div>Profile 5 <button onclick="hideMe(this)">Hide</button></div>

＆＃13;

Answer 2

如果我正确理解你的问题，听起来你只需要在最后点击的元素中添加一个类并删除现有的

var hideMe = function(){
    document.getElementsByClassName("last-clicked").removeClass("last-clicked");
    document.getElementById("card").addClass("last-clicked");
    document.getElementById("card").toggleClass("hide-me");} 

var undo = function(){
document.getElementsByClassName("last-clicked").removeClass("hide-me");}

仅从上一个元素中删除类

2 个答案: