Javascript jQuery多点点击处理

下面的代码用于处理从

列表

中单击

链接

，显示屏幕，然后在按下

.back

按钮时将其隐藏

对于任何

x

数量的

列表

项目，是否有更干净的方法来处理单击功能

$(".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")
});

---

可以使用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>

---

希望能有所帮助。

您可以从HTML5的

数据-*

属性中获益，这就是它的答案

但另外，您也可以将JSON格式的自定义样式放在数据属性中。这样就不需要在每个控件上都指定它。这只需要单击一下处理程序，如下所示

$（'button'）。在（'click'，function（）上{
var target=$（this）.data（'target'），
css=$（this.data（'css'）；
$（目标）.css（css）；
})

单击1
点击2
屏幕1
屏幕2

不带jQuery的实体模型，使用和ES20xx

document.querySelector（“.container”）.addEventListener（“单击”，handleEvents）；
document.querySelector（“返回”）。单击（）；
功能手柄通风口（evt）{
常量原点=evt.target；
常量屏幕图={
“狗btn”：“屏幕1”，
“cat btn”：“屏幕2”，
“鸟类btn”：“屏幕3”，
};
if（origin.id&&origin.id==“back”）{
const screens=`.${Object.entries（screenMap）.map（[key，value]）=>value.join（“，.”）}`；
返回数组.from（document.queryselectoral（屏幕））
.forEach（screen=>screen.style.display=“无”）；
}
if（Array.from（origin.classList）.filter（v=>/\-btn$/i.test（v））.length）{
return document.querySelector（`.${screenMap[origin.classList]}`）
.style.display=“flex”；
}
}

屏幕1狗
屏幕2 CAT
屏风3鸟
#背
.狗
.cat btn
.伯德

据我所见，您只需要一个处理程序来处理

#back

，它可以隐藏所有3个屏幕。您也可以发布html吗？是的，

数据-*

在这种情况下肯定会有所帮助。

//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")
});