时间戳

首页 > 解决方案 > 当有人单击带有 HTML、JS 或 Ajax 的按钮时，如何隐藏特定的分区？

javascript - 当有人单击带有 HTML、JS 或 Ajax 的按钮时，如何隐藏特定的分区？

问题描述

因此，当有人单击按钮时，我想隐藏（最好是切换）一些划分。我有20多个分区和20个按钮，每个按钮都应该关闭指定的分区。为了更容易理解，我们只需要一个分区和一个按钮即可。

所以我有 2 个部分，这是我尝试过的：我拥有的 html 部分

<div class="sssadsa" id="buttonsdiv">
  <button id="thebutton" type="button" onclick="toggleDiv(divtohide0);">
    <h3>Scene 1</h3>
  </button>
</div>

<div id="divtohide0">
 some content
</div>

这是我拥有的整个 javascript，但不知何故我无法管理它以使其正常工作，单击按钮时 js 不执行任何操作。甚至没有警报（“你好世界”）；

function toggleDiv(id){

  alert("hello world -back to the roots" );

  event.preventDefault();
  $('#' + id).toggle(); // Toggle div visibility
}

标签： javascripthtml

解决方案

可能会发生几件事。

  1. 您的 javascript 未加载（尝试console.log在函数外部运行并检查是否看到任何内容。如果您不检查加载脚本的方式）
  2. toggleDiv全局不可用（window.toggleDiv = toggleDiv在声明函数后尝试添加）

如果以上任何一个不起作用，请发表评论。

另请注意代码中的以下错误：

  1. event如果您传递另一个参数（例如：） ，则不能调用divtohide0。
  2. 您需要使用字符串来传递 id，否则 javascript 将需要一个变量。（例如toggleDiv('divtohide0');：）
  3. 我建议您避免h3在button. 如果您需要对内容进行样式设置，请使用类。

在 snipper 中，还有另一个函数可以让事件起作用，它需要在button. 但是有几种方法可以达到相同的结果。

function toggleDiv(id){

  alert("hello world -back to the roots" );

  // event.preventDefault(); this won't work
  $('#' + id).toggle(); // Toggle div visibility
}

function toggleDivWithEvent(event) {
  event.preventDefault();
  var id = $(event.target).data('target-id');
  $('#' + id).toggle(); // Toggle div visibility
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sssadsa" id="buttonsdiv">
  <button id="thebutton" type="button" onclick="toggleDiv('divtohide0');">
    <h3>Scene 1</h3>
  </button>
</div>

<div id="divtohide0">
 some content
</div>


<div class="sssadsa" id="buttonsdiv">
  <button id="thebutton" type="button" data-target-id="divtohide1" onclick="toggleDivWithEvent(event)">
    <h3>Scene 1</h3>
  </button>
</div>

<div id="divtohide1">
 some content
</div>

推荐阅读