显示/隐藏多个隐藏按钮答案

【问题标题】：show/hide multiple hide buttons显示/隐藏多个隐藏按钮
【发布时间】：2021-11-27 01:34:21
【问题描述】：

是否可以使这个显示/隐藏脚本与多个隐藏按钮或类似的东西一起工作？ 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

【问题讨论】：

请确保每个按钮都有一个唯一的 ID（您打算使用类吗？），这些是 HTML、CSS 和 JS 交互的基本构建块，请熟悉这些内容。我们也无法猜测您对代码的意图。你能详细描述你想要做什么吗？

标签： javascript html css show-hide

【解决方案1】：

这里的第一个问题是所有隐藏按钮都具有相同的 ID 值，您可以通过为它们提供相同的类值并在 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>

【讨论】：

大声笑，你打败了我，我正在编写自己的修复程序，它和你得到的一样。感谢您的再保险。 :)
随时欢迎您。 ;)