如何使用jQuery独特地最小化和最大化卡片

Question

我想创建单独最小化和最大化卡片的功能。

例如，我有 10 个卡片 div，每个卡片都有一个按钮来隐藏/显示 div。我已经从 w3School 的教程中尝试过，但我只能为一张卡而不是单独为所有其他卡做到这一点。

这段代码一次只能用于一个 div 我怎样才能使它对所有 div 都具有动态性？对于 div 的唯一 ID，我有 createdTime。 请帮忙

$(document).ready(function(event) {
  $(".toogleCard").click(function() {
    var status = $(event.currentTarget).attr('id');
    if ($(this).html() == "-") {
      $(this).html("+");
    } else {
      $(this).html("-");
    }
    $("status").slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toogleCard" id="uniqueid1">-</button>
<p id="uniqueid1">This is a paragraph.</p>

<button class="toogleCard" id="uniqueid1">-</button>
<p id="uniqueid2">This is a paragraph.</p>

<button class="toogleCard" id="uniqueid1">-</button>
<p id="uniqueid3">This is a paragraph.</p>

Answer 1

您正在寻找的技术称为'Don't Repeat Yourself', or DRY。

为了在这种情况下实现它，您可以通过在 button 和 p 元素上使用相同的类来使 HTML 结构相同，因此可以无限重复。然后在 JS 中，您可以使用 jQuery 的 DOM 遍历方法，在本例中为 next()，将引发 click 事件的元素与需要显示/隐藏的目标元素相关联。

试试这个：

jQuery($ => {
  $(".toggleCard").click(e => {
    let $toggle = $(e.target);
    $toggle.text((i, t) => t === '-' ? '+' : '-');
    $toggle.next('.para').slideToggle();
  });
});

.toggleCard { display: block; }
.para { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggleCard">-</button>
<p class="para">This is a paragraph.</p>

<button class="toggleCard">-</button>
<p class="para">This is a paragraph.</p>

<button class="toggleCard">-</button>
<p class="para">This is a paragraph.</p>