show/hide 多个隐藏按钮

Question

是否可以让这个 show/hide 脚本与多个隐藏按钮或类似的东西一起工作？ id="cv_cont 默认情况下应保持可见。

HTML

<button id="show_cv">Show</button>
<button id="hide_cv">Hide 1</button>
<button id="hide_cv">Hide 2</button>
<button id="hide_cv">Hide 3</button>
<button id="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>

JavaScript

$("#hide_cv").click(function() {
    $("#cv_cont").hide();
});

$("#show_cv").click(function() {
    $("#cv_cont").show();
});

脚本的原始位置。 jQuery - failed show/hide buttons

Answer 1

这里的第一个问题是所有隐藏按钮都具有相同的 ID 值，您可以通过为它们提供相同的 class 值并在 JavaScript 代码中调用它来解决这个问题。
正确的代码应该是这样的：

<!DOCTYPE html>
<html lang="fr">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <button class="show_cv">Show</button>
<button class="hide_cv">Hide 1</button>
<button class="hide_cv">Hide 2</button>
<button class="hide_cv">Hide 3</button>
<button class="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
  <script>
    $(".hide_cv").click(function() {
    $("#cv_cont").hide();
});

$(".show_cv").click(function() {
    $("#cv_cont").show();
});
  </script>
</body>
</html>

show/hide 多个隐藏按钮

show/hide multiple hide buttons

html

javascript

css

show-hide