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


  
    
    
    
    
    
  
  
    
      
      
        
          Username
          
        
        
          Account name
          
        
        
          Old password
          
        
        
          New password
          
        
        
          Confirm password
          
        
        
          Update password
        
      
    
    
      
      
        
          Email
          
        
        
          
          
        
        
          Add more email
        
      
    
    
      Contact number
    
    
      Company
    
    
      Help

sachuverma · Accepted Answer

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





  
    
    
    
    
    
  
  
    
      
      
        
          Username
          
        
        
          Account name
          
        
        
          Old password
          
        
        
          New password
          
        
        
          Confirm password
          
        
        
          Update password
        
      
    
    
      
      
        
          Email
          
        
        
          
          
        
        
          Add more email
        
      
    
    
      Contact number
    
    
      Company
    
    
      Help

How can I change my Javascript code to jQuery code

Answers (1)

Related Questions