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

Question

如何仅使用具有多个 ID 的纯 Javascript 重新编码我的 jQuery？

$('#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(); 
});

我的 JS 版本不是很干净，我想一次针对所有 id，而不是对我有 6perso 的每个 id 一遍又一遍地做同样的事情

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

您可以使用Element.querySelector和Element.querySelectorAll这允许你
定位与指定选择器匹配的元素，就像您已经使用 JQuery 所做的那样。

为了简化你的 JS 代码，你可以制作一些实用函数来缩短它。

顺便说一句，你的 JS 代码是错误的。 您犯了document.getElementByClassName的常见错误。
它像数组一样返回一个元素list ，因此您不能像以前那样访问它。

您的 JQuery 代码

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

JS版本

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')
})

您可以创建您认为需要的尽可能多的助手，以使代码更易于编写。