Question

因此，在隐藏第一个元素（主菜单）之后，我将显示另一个具有输入和两个按钮（播放和返回）的菜单。当我单击return时，我想返回主菜单（第一个元素），但是show（）和hide（）不再起作用，我不知道为什么。我想用Electron制作这个应用程序，但是我也在Web浏览器上尝试过，是一样的。如果您能帮助我，我将非常感激！

window.$ = window.jQuery = require('jquery');

$('#AIbtn, #PVPbtn').click(function() {
	if( this.id == 'AIbtn') {
		show_ai_menu();
	}
	else if( this.id == 'PVPbtn') {
		show_pvp_menu();

	}
	else if( this.id == 'returnBTN') {
		show_init_menu();
	}
});

function show_ai_menu() {
	$(".removeContent").hide();
	$(".afterClick").show(function() {
		$(this).append("<p class='infoText'>Please, enter your name !</p>");
		$(this).append("<div class='classFrm' <form><input class='formGame' type='text' name='pnAI' value='Player 1'></input></form></div>");
		$(this).append("<div class='classBtns'><button type='button' class='gameButton Playbtn' id='playPVA'>Play !</div>");
		$(this).append("<div class='classBtns'><button type='button' class='gameButton AIbtn' id='returnBTN'>Return  <i class='fas fa-undo-alt'></i></div>");
	});
}
function show_pvp_menu() {
	$(".removeContent").hide();
	$(".afterClick").show(function() {
		$(this).append("<p class='infoText'>Please, enter your name !</p>");
		$(this).append("<div class='classFrm'><form><input class='formGame' type='text' name='pnPVP1' value='Player 1'></input></div>");
		$(this).append("<div class='classFrm'><input class='formGame' type='text' name='pnPVP2' value='Player 2'></input></form></div>");
		$(this).append("<div class='classBtns'><button type='button' class='gameButton Playbtn' id='playPVP'>Play !</div>");
		$(this).append("<div class='classBtns'><button type='button' class='gameButton AIbtn' id='returnBTN'>Return  <i class='fas fa-undo-alt'></i></div>");
	});
}
function show_init_menu() {
	$(".afterClick").hide();
	$(".removeContent").show();
}

Answer 1

在以下函数中，第三个子句不可访问（您仅将点击事件附加到AIbtn和PVPbtn，因此this.id永远不会是returnBTN。）

$('#AIbtn, #PVPbtn').click(function() {
  if (this.id == 'AIbtn') {
    show_ai_menu();
  } else if (this.id == 'PVPbtn') {
    show_pvp_menu();  
  } else if (this.id == 'returnBTN') {
    show_init_menu();
  }
});

不过，不能仅通过将该ID添加到选择器列表中来解决此问题，因为在分配这些点击事件时returnBTN元素尚不存在（因为您只能追加稍后将其作为show_foo_menu()函数之一的一部分添加到DOM。

您可以改用delegated event，将其附加到始终存在的父元素上：

$('#parent').on("click", "#AIbtn, #PVPbtn, #returnBTN", function() {
  if (this.id == 'AIbtn') {
    show_ai_menu();
  } else if (this.id == 'PVPbtn') {
    show_pvp_menu();
  } else if (this.id == 'returnBTN') {
    show_init_menu();
  }
});

function show_ai_menu() {
  $(".removeContent").hide();
  $(".afterClick").show(function() {
    $(this).empty(); // don't duplicate the content
    $(this).append("<p class='infoText'>Please, enter your name !</p>");
    $(this).append("<div class='classFrm' <form><input class='formGame' type='text' name='pnAI' value='Player 1'></input></form></div>");
    $(this).append("<div class='classBtns'><button type='button' class='gameButton Playbtn' id='playPVA'>Play !</div>");
    $(this).append("<div class='classBtns'><button type='button' class='gameButton AIbtn' id='returnBTN'>Return  <i class='fas fa-undo-alt'></i></div>");
  });
}

function show_pvp_menu() {
  $(".removeContent").hide();
  $(".afterClick").show(function() {
    $(this).empty(); // don't duplicate the content  
    $(this).append("<p class='infoText'>Please, enter your name !</p>");
    $(this).append("<div class='classFrm'><form><input class='formGame' type='text' name='pnPVP1' value='Player 1'></input></div>");
    $(this).append("<div class='classFrm'><input class='formGame' type='text' name='pnPVP2' value='Player 2'></input></form></div>");
    $(this).append("<div class='classBtns'><button type='button' class='gameButton Playbtn' id='playPVP'>Play !</div>");
    $(this).append("<div class='classBtns'><button type='button' class='gameButton AIbtn' id='returnBTN'>Return  <i class='fas fa-undo-alt'></i></div>");
  });
}

function show_init_menu() {
  $(".afterClick").hide();
  $(".removeContent").show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <div class="removeContent">
    <button id="AIbtn">AIbtn</button>
    <button id="PVPbtn">PVPbtn</button>
  </div>

  <div class="afterClick"></div>
</div>

...但是在这种情况下，在显示/隐藏阶段不修改DOM似乎更简单：将append()的内容改为使用.afterClick来更改.show()的内容首先将DOM中的内容放在单独的元素中，然后从隐藏它们开始。

旁注

jQuery当前允许您使用.show( [duration ] [, complete ] ) 的方式-方法签名{complete: function(){...}}表示持续时间和“完成”功能都是可选的，因此可以省略持续时间。（不过，您当前的操作方式有些令人困惑；就我个人而言，我要么添加一个持续时间，要么使用更明确的show签名。）

但是，等到$('.afterClick').empty().append("your HTML here").show();完成之后再将元素的内容插入DOM的结果是，您在第一次运行时会丢失动画（因为第一次调用它，尝试时该元素为空进行显示。）如果您仍然需要即时将该内容插入到DOM中，而不是将其放置在适当位置但在页面加载时隐藏，则最好在显示元素之前而不是之后设置内容：

return

Answer 2

就像Ashay所说，show没有与您的用法匹配的签名。查看文档：{{3}} 如果要在动画制作完成后执行代码，可以

OpenCV

或

$(...).show({complete: function myCompleteCallback() {...} })

如果您想同步执行代码（而不是等到整个节目结束），请再次查看Ashay的答案（在显示电话之后输入您的代码）。

隐藏元素后无法显示

2 个答案:

旁注