Javascript onclick 用于 jquery 中的多个元素

Question

我有以下 javascript 代码。

 function hide(id) { prp = document.getElementById(id).style.display; if(prp == "block") prp = "none"; else prp = "block"; document.getElementById(id).style.display = prp; }

 <body> <button id="btn1" onclick="hide('p1')">Button1</button> <button id="btn2" onclick="hide('p2')">Button2</button> <button id="btn3" onclick="hide('p3')">Button3</button> <p id="p1" style="display: block;">This is para 1</p> <p id="p2" style="display: block;">This is para 2</p> <p id="p3" style="display: block;">This is para 3</p> </body>

假设，我有 N 个类似上面的按钮/p 标签。 如何将此代码转换为 jQuery？

Answer 1

你需要委托 - 我包裹在一个容器中

注意我向按钮添加了数据属性以从按钮而不是内联事件处理程序中获取段落

香草JS

 document.getElementById("container").addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("toggleBtn")) { e.preventDefault(); // stop the click in case it is in a form document.getElementById(tgt.dataset.id).classList.toggle("hide") } })

 .hide { display: none }

 <div id="container"> <button id="btn1" class="toggleBtn" data-id="p1">Button1</button> <button id="btn2" class="toggleBtn" data-id="p2">Button2</button> <button id="btn3" class="toggleBtn" data-id="p3">Button3</button> </div> <p id="p1">This is para 1</p> <p id="p2">This is para 2</p> <p id="p3">This is para 3</p>

jQuery

 $("#container").on("click", ".toggleBtn", function(e) { e.preventDefault(); $("#"+this.dataset.id).toggleClass("hide"); // or just.toggle() })

 .hide { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <button id="btn1" class="toggleBtn" data-id="p1">Button1</button> <button id="btn2" class="toggleBtn" data-id="p2">Button2</button> <button id="btn3" class="toggleBtn" data-id="p3">Button3</button> </div> <p id="p1">This is para 1</p> <p id="p2">This is para 2</p> <p id="p3">This is para 3</p>

Javascript onclick 用于 jquery 中的多个元素

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-06-25 07:43:06

Javascript onclick 用于 jquery 中的多个元素

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-06-25 07:43:06

解决方案1
3 已采纳 2020-06-25 07:43:06