当我有多个时，如何在这种情况下用 JS 替换 jQuery #

Question

How can I recode my jQuery, using only pure Javascript, withe multiple ids?

$('#perso1').mouseenter(function() {
     $('.perso1').show(); 
     $('.name1').show(); 
     $('.perso2').hide(); 
     $('.name2').hide(); 
});

$('#perso1').mouseleave(function() {
     $('.perso2').hide(); 
     $('.name1').hide(); 
     $('.perso1').show(); 
     $('.name1').show(); 
});

$('#perso2').mouseenter(function() {
     $('.perso2').show(); 
     $('.name2').show(); 
     $('.perso1').hide(); 
     $('.name1').hide(); 
});

$('#perso2').mouseleave(function() {
     $('.perso2').hide(); 
     $('.name2').hide(); 
     $('.perso1').show(); 
     $('.name1').show(); 
});

My JS version but is not very clean and I want to target all the id at once not do the same thing over and over for every ID I have 6perso

document.getElementById("perso2,").onmouseenter = function() {mouseEnter()};
document.getElementById("perso2").onmouseleave = function() {mouseLeave()};

function mouseEnter() {
        document.getElementByClassName("perso1").style.display = 'none';
        document.getElementByClassName("name1").style.display = 'none';
        document.getElementByClassName("perso2-2").style.display = 'block';
        document.getElementByClassName("name2").style.display = 'block';
}
      
function mouseLeave() {
        document.getElementByClassName("perso1").style.display = 'block';
        document.getElementByClassName("perso2").style.display = 'none';
        document.getElementByClassName("name1").style.display = 'block';
        document.getElementByClassName("name2").style.display = 'none';
}

Answer 1

You can use Element.querySelector and Element.querySelectorAll which allows you
to target elements that matches the specified selector as you do already with JQuery.

To simplify your JS code you can make some utility functions to short it.

Btw, your JS code is wrong. You are making the common mistake with document.getElementByClassName .
It returns a list of element like an array, so you can't access it the way you did.

Your JQuery code

$('#perso1').mouseenter(function(){
     $('.perso1').show();
     $('.name1').show();
     $('.perso2').hide();
     $('.name2').hide();
});

JS version

const query = selector => document.querySelector(selector)

query('#perso1').addEventListener('mouseenter', event => {
  // Here you could use a class to toggle visibility
  query('.perso1').classList.remove('hidden')
  query('.name1').classList.remove('hidden')
  query('.perso2').classList.add('hidden')
  query('.name2').classList.add('hidden')
})

You can make as many helpers as you think you would need to make the code easier to write.