How can I change my Javascript code to jQuery code

Question

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

I've tried to convert my JS Code to JQuery i dont see any try, where did you fail? otherwise it´s impossible to help — john Smith
– john Smith, Commented Dec 15, 2022 at 8:52
The only two jQuery methods you need to replicate this logic are on() and toggleClass() — Rory McCrossan
– Rory McCrossan, Commented Dec 15, 2022 at 8:56
Hi, Rory and John I've tried converting my forEach to each function in jQuery but still no use. Anyways, thanks for the idea — CoreTM
– CoreTM, Commented Dec 15, 2022 at 8:59

sachuverma · Accepted Answer · 2022-12-15 09:13:25Z

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 listener
this 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 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>

thanks for this document and for helping me understanding of your code

Collectives™ on Stack Overflow

How can I change my Javascript code to jQuery code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related