jquery 在Javascript中是否可以使用两个querySelectorAll，一个在另一个里面？

klh5stk1 于 2022-12-26 发布在 jQuery

关注(0)|答案(2)|浏览(127)

我试图创建一个像Facebook一样的React系统，但是有一个问题我无法解决。所以，让我们来解释一下我的html是什么样子的。有一个主div，包含一个link元素**（<a></a>）**，用于默认的like图标悬停和打开React，还有一个div，包含React。如下所示：

<div class="post__actions-inner">
<div id="act-reactions" class="container">
<div class="content">
<div class="emoji">
<div class="hello">
<a class="emoticon-0" href="#/"></a>
<p>Like</p>
</div>
<div class="hello">
<a class="emoticon-1" href="#/"></a>
<p>love</p>
</div>
<div class="hello">
<a class="emoticon-2" href="#/"></a>
<p>Haha</p>
</div>
<div class="hello">
<a class="emoticon-3" href="#/"></a>
<p>Wink</p>
</div>
<div class="hello">
<a class="emoticon-4" href="#/"></a>
<p>Wow</p>
</div>
<div class="hello">
<a class="emoticon-5" href="#/"></a>
<p>Sad</p>
</div>
<div class="hello">
<a class="emoticon-6" href="#/"></a>
<p>Angry</p>
</div>
<div class="hello">
<a class="emoticon-7" href="#/"></a>
<p>Crazy</p>
</div>
<div class="hello">
<a class="emoticon-8" href="#/"></a>
<p>Speechless</p>
</div>
<div class="hello">
<a class="emoticon-9" href="#/"></a>
<p>Grateful</p>
</div>
<div class="hello">
<a class="emoticon-10" href="#/"></a>
<p>Celebrate</p>
</div>
<div class="hello">
<a class="emoticon-11" href="#/"></a>
<p>Heartbroken</p>
</div>
<div class="hello">
<a class="emoticon-12" href="#/"></a>
<p>Evil</p>
</div>
<div class="hello">
<a class="emoticon-13" href="#/"></a>
<p>Embarassed</p>
</div>
</div>
</div>
</div>
<a id="default-like-2288" href="#/" class="post__action post__action--reaction reaction reaction__toggle reaction-toggle--2288 reaction-emoticon-0 js-reaction-toggle" style="display: block;" data-id="2288">
<span>Like</span>
</a>
</div>

所以，我尝试做的是显示当我悬停在默认值上时的React，如。我尝试使用两个querySelectorAll，一个在另一个里面，但它对这个问题没有帮助。

document.querySelectorAll('.post__action--reaction.container').forEach(elem => elem.addEventListener("mouseenter", () => {
        var container = document.querySelectorAll('.container').forEach(elem => elem.addEventListener("mouseenter", () => {
          container.style.display = "block";
        }));
      }));

我能做些什么来解决这个问题？提前感谢！！

jquery

来源：https://stackoverflow.com/questions/74896595/is-it-possible-to-use-two-queryselectorall-one-inside-the-other-in-javascript

2条答案

按热度按时间

cvxl0en21#

首先，.“post__action--reaction.container”不是正确的选择器。如果您尝试将事件侦听器添加到默认的“类似”按钮，则应该侦听"#default-like-2288“或仅侦听.”post__action--reaction“。
我假设你会有多个默认的按钮和容器。你可以使用下面的逻辑显示和隐藏.container元素，

let defaultLike = document.querySelectorAll('.post__action--reaction')
    
    defaultLike.forEach((like) => {
        //gets the previous sibling node which is also an element.
        //here, previous element sibling of the like  button is #act-reactions div
        let reactionContainer = like.previousElementSibling
        
        like.addEventListener('mouseenter', () => {reactionContainer.style.display = 'block'})
        like.addEventListener('mouseleave', () => {reactionContainer.style.display = 'none'})
    })

赞(0）回复(0）举报 2022-12-26

omjgkv6w2#

我认为你的方法有点过于复杂了。看起来你有一个一致的标签结构等等...所以我建议把每一组like button和emoji放在一个容器里，然后用querySelectorAll()来抓取每个容器。你可以迭代每个容器，通过切换类来改变它的children的可见性。
我已经包含了一个示例，我认为它采用了一种非常简单的普通JS方法。

let likeButtons = [...document.querySelectorAll(".likeButton")];
likeButtons.forEach(lb=>{
  lb.addEventListener("mouseover",()=>{
    lb.children[0].classList.remove("hidden");
  })
  lb.addEventListener("mouseout",()=>{
    lb.children[0].classList.add("hidden");
  })
  
})

.content{
  width:400px;
  height:200px;
  border: 1px solid gray;
  position:relative;
}
.likeButton{
  position:absolute;
  cursor:pointer;
  left:100%;
  top:100%;
  transform: translateX(-100%) translateY(-100%);
}
.emojiContainer{
  position:absolute;
  left:100%;
  top:10%;
  transform: translateX(-100%) translateY(-100%);
}
.hidden{
  display:none;
}

<div class='content'>
  
  <div class='likeButton'>
  👍
  <div class='emojiContainer hidden'>
    <span>😂</span>
    <span>😁</span>
    <span>😍</span>
    <span>😏</span>
    <span>🤗</span>
  </div>
  </div>
</div>
<div class='content'>
  
  <div class='likeButton'>
  👍
  <div class='emojiContainer hidden'>
    <span>😂</span>
    <span>😁</span>
    <span>😍</span>
    <span>😏</span>
    <span>🤗</span>
  </div>
  </div>
</div>
<div class='content'>
  
  <div class='likeButton'>
  👍
  <div class='emojiContainer hidden'>
    <span>😂</span>
    <span>😁</span>
    <span>😍</span>
    <span>😏</span>
    <span>🤗</span>
  </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-26

我来回答

jquery 在Javascript中是否可以使用两个querySelectorAll，一个在另一个里面？

2条答案

相关问题

热门标签

最新问答