我试着把我的JS代码转换成jQuery，但是我还是不能修复它。有人能帮我吗？
const content = document.querySelectorAll(".nk-sec-content")
const btnIcon = document.querySelectorAll(".nk-sec-icon")
btnIcon.forEach(btns => {
btns.addEventListener("click", (e) => {
const currentTarget = e.currentTarget
const currentSelected = document.getElementById(currentTarget.dataset.content)
// console.log(currentSelected)
content.forEach(contentItems => {
if (contentItems !== currentSelected) {
contentItems.classList.remove("show")
}
})
currentSelected.classList.add("show")
})
}).nk-sec-content {
height: 100%;
display: none;
}
.nk-sec-content.show {
display: block;
}
.nk-sec-icon {
width: 30px;
height: 30px;
background: yellow;
}
.nk-sec-icon-l {
display: flex;
gap: 10px;
}<div class="nk-sec-container-settings">
<div class="nk-sec-icon-l">
<div class="nk-sec-icon _changepassword" data-content="changepassword" data-title="Change Password"></div>
<div class="nk-sec-icon _emailaddress" data-content="emailaddress" data-title="Email Address"></div>
<div class="nk-sec-icon _contactnumber" data-content="contactnumber" data-title="Contact Number"></div>
<div class="nk-sec-icon _company" data-content="company" data-title="Company"></div>
<div class="nk-sec-icon _help" data-content="help" data-title="Help"></div>
</div>
<div class="nk-sec-settings-content">
<div class="nk-sec-content show" id="changepassword">
<!-- <div class="nk-sec-content-title">Change password</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Username</div>
<input type="text" id="username" name="username" value="001637" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Account name</div>
<input type="text" id="accountname" name="accountname" value="" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Old password</div>
<input type="text" id="oldpassword" name="oldpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">New password</div>
<input type="text" id="newpassword" name="newpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Confirm password</div>
<input type="text" id="confirmpassword" name="confirmpassword">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Update password</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="emailaddress">
<!-- <div class="nk-sec-content-title">Add email address</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Email</div>
<input type="text" id="email" name="email" value="" disabled="">
</div>
<div class="nk-sec-input">
<!-- <div class="nk-cp-text">Email</div> -->
<input type="text" id="email" name="email" value="">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Add more email</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="contactnumber">
<div class="nk-sec-content-title">Contact number</div>
</div>
<div class="nk-sec-content" id="company">
<div class="nk-sec-content-title">Company</div>
</div>
<div class="nk-sec-content" id="help">
<div class="nk-sec-content-title">Help</div>
</div>
</div>
</div>
1条答案
按热度按时间monwx1rj1#
这就是使用jQuery的方法，您只需要查看所使用的jQuery的相应方法。
比如
$('')是查询选择器.on('', function)是事件侦听器this关键字用于引用当前目标元素$('').attr('')用于获取目标的属性值$('').removeClass('')、$('').addClass('')，用于删除和添加类我建议您访问official documentation以获得更好的理解。