时间戳

首页 > 解决方案 > 如何使一个元素出现而不触发同一类的其他元素

javascript - 如何使一个元素出现而不触发同一类的其他元素

问题描述

我必须制作一组出现和消失的按钮。

它应该如何工作：

  1. 我单击链接 1（此时链接 2 不可见）。
  2. 然后应该会出现链接 2。

这里的问题是可以有多个具有相同类的相同类型的元素，我无法弄清楚如何区分只显示与单击的“link1”相对应的“link2”而不触发另一个“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”元素，该解决方案都应该有效。

标签： javascriptjqueryhtml

解决方案

问题是因为您选择了所有.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>

推荐阅读