I've tried to convert my JS code to jQuery however I can't still fix it. Can anyone help me with it?
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 >
<div >
<div data-content="changepassword" data-title="Change Password"></div>
<div data-content="emailaddress" data-title="Email Address"></div>
<div data-content="contactnumber" data-title="Contact Number"></div>
<div data-content="company" data-title="Company"></div>
<div data-content="help" data-title="Help"></div>
</div>
<div >
<div id="changepassword">
<!-- <div >Change password</div> -->
<div >
<div >
<div >Username</div>
<input type="text" id="username" name="username" value="001637" disabled="">
</div>
<div >
<div >Account name</div>
<input type="text" id="accountname" name="accountname" value="" disabled="">
</div>
<div >
<div >Old password</div>
<input type="text" id="oldpassword" name="oldpassword">
</div>
<div >
<div >New password</div>
<input type="text" id="newpassword" name="newpassword">
</div>
<div >
<div >Confirm password</div>
<input type="text" id="confirmpassword" name="confirmpassword">
</div>
<div >
<div >Update password</div>
</div>
</div>
</div>
<div id="emailaddress">
<!-- <div >Add email address</div> -->
<div >
<div >
<div >Email</div>
<input type="text" id="email" name="email" value="" disabled="">
</div>
<div >
<!-- <div >Email</div> -->
<input type="text" id="email" name="email" value="">
</div>
<div >
<div >Add more email</div>
</div>
</div>
</div>
<div id="contactnumber">
<div >Contact number</div>
</div>
<div id="company">
<div >Company</div>
</div>
<div id="help">
<div >Help</div>
</div>
</div>
</div>
CodePudding user response:
This is how you can do it using jQuery. You just need to see the corresponding methods for jQuery which you used.
Like,
$('')
is the query selector.on('', function)
is the event listenerthis
keyword is used to refer to the current target element$('').attr('')
is used to get the value of attribute of the target$('').removeClass('')
,$('').addClass('')
, to remove and add classes
I recommend you to visit the official documentation for better understanding.
$(".nk-sec-icon").on('click', function(event) {
// Get element with id = current clicked div's data-content attribute
const targetDiv = $(`#${$(this).attr("data-content")}`);
// Remove show and add hide in class from all divs with class 'nk-sec-content'
$(".nk-sec-content").removeClass('show');
$(".nk-sec-content").addClass('hide');
// In current clicked button's target remove hide and add show.
targetDiv.removeClass('hide');
targetDiv.addClass('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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<div data-content="changepassword" data-title="Change Password"></div>
<div data-content="emailaddress" data-title="Email Address"></div>
<div data-content="contactnumber" data-title="Contact Number"></div>
<div data-content="company" data-title="Company"></div>
<div data-content="help" data-title="Help"></div>
</div>
<div >
<div id="changepassword">
<!-- <div >Change password</div> -->
<div >
<div >
<div >Username</div>
<input type="text" id="username" name="username" value="001637" disabled="">
</div>
<div >
<div >Account name</div>
<input type="text" id="accountname" name="accountname" value="" disabled="">
</div>
<div >
<div >Old password</div>
<input type="text" id="oldpassword" name="oldpassword">
</div>
<div >
<div >New password</div>
<input type="text" id="newpassword" name="newpassword">
</div>
<div >
<div >Confirm password</div>
<input type="text" id="confirmpassword" name="confirmpassword">
</div>
<div >
<div >Update password</div>
</div>
</div>
</div>
<div id="emailaddress">
<!-- <div >Add email address</div> -->
<div >
<div >
<div >Email</div>
<input type="text" id="email" name="email" value="" disabled="">
</div>
<div >
<!-- <div >Email</div> -->
<input type="text" id="email" name="email" value="">
</div>
<div >
<div >Add more email</div>
</div>
</div>
</div>
<div id="contactnumber">
<div >Contact number</div>
</div>
<div id="company">
<div >Company</div>
</div>
<div id="help">
<div >Help</div>
</div>
</div>
</div>