当我有多个时，我如何在这种情况下用 js 替换 jquery #答案

【问题标题】：how i can replace jquerry with js in this situation when i have multiple #当我有多个时，我如何在这种情况下用 js 替换 jquery #
【发布时间】：2022-11-23 04:52:36
【问题描述】：

我的查询我如何仅使用具有多个 id 的 js 对其进行解码

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

【问题讨论】：

标签： javascript jquery function mouseevent

【解决方案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')
})

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

【讨论】：