Javascript onclick for can in jquery 中的多个元素

我有下面的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？

你需要委派 - 我包裹在一个容器里

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

香草 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>

相关内容

最新更新

热门标签：