我必须制作一组出现和消失的按钮。
它应该如何工作:
- 我点击链接 1(此时链接 2 不可见)。
- 然后应该会出现链接 2。
这里的问题是可以有多个具有相同类的相同类型的元素，我无法弄清楚如何区分仅显示“link2” 对应于点击的“link1”而不触发其他“link2”。
有一些代码显示了我取得的进展。
提前致谢!
<style>
.hideaction{
visibility: hidden;
}
.showaction{
visibility: visible;
}
</style>
<script>
$(document).ready(function(){
$(".elem_action_showing").click(function(){
$(".elem_action_hiding").removeClass("hideaction").addClass("showaction");
});
</script>
</head>
<body>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
</body>
无论有多少“.elem_card”和“.hideaction”元素，该解决方案都应该有效。
最佳答案
问题是因为您选择了所有 .elem_action_hiding 元素。要解决此问题，请使用 DOM 遍历仅查找与被单击的 .elem_action_showing 相关的那个。试试这个:
$(".elem_action_showing").click(function() {
$(this).closest('.elem_showing').prev().find(".elem_action_hiding").toggleClass("hideaction showaction");
});.hideaction {
visibility: hidden;
}
.showaction {
visibility: visible;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>
<div class="elem_card card_set_click" style=" border: 1px solid black">
<div class="elem_hidden">
<p class="hideaction elem_action_hiding">%link2%</p>
</div>
<div class="elem_showing ">
<p class="elem_action_showing set_click">%link1%</p>
</div>
</div>关于javascript - 如何使一个元素出现而不触发同一类的其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57670142/