javascript - jQuery 多次点击处理

Question

我使用下面的代码来处理从 list 中点击一个 link，显示一个屏幕，然后在 .back 时隐藏它> 按钮被按下。

是否有更简洁的方法来处理任意 x 个 list 项的点击功能？

$(".container").on("click", ".dog-btn", function() {
  $(".screen1").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen1").css("display","none")
});
$(".container").on("click", ".cat-btn", function() {
  $(".screen2").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen2").css("display","none")
});
$(".container").on("click", ".bird-btn", function() {
  $(".screen3").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen3").css("display","none")
});

Answer 1

您可以使用 html5 数据属性来传递屏幕类。

HTML 代码

<div class="container">
<button class="flex" data-screen="screen1"> DOG</button> 
<a href="void(0)" data-screen="screen1" class="back">Back </a>
</div>

JavaScript 代码

//Flex Handler
$(".container").on("click", ".flex", function() {
  $("."+$(this).data("screen")).css("display","flex")
});
//Back Button Handler
$(".container").on("click", ".back", function() {
  $("."+$(this).data("screen")).css("display","none")
});

希望对您有所帮助。