文章/答案/技术大牛

发布

社区首页 >问答首页 >显示/隐藏多个隐藏按钮

问显示/隐藏多个隐藏按钮
EN

Stack Overflow用户

提问于 2021-10-06 21:46:04

回答 1查看 436关注 0票数 0

是否有可能让这个显示/隐藏脚本与多个隐藏按钮或类似的东西一起工作？默认情况下，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

show-hide

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-06 22:05:37

这里的第一个问题是所有隐藏按钮都有相同的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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69473030

复制

相似问题

问显示/隐藏多个隐藏按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示/隐藏多个隐藏按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示/隐藏多个隐藏按钮
EN