Question 35769 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Is it possible to use two querySelectorAll one inside the other in Javascript? – Jquery

I am trying to create a reaction system like Facebook but there is a problem I cannot figure out. So, let’s explain how my html looks like. There is a main div that contains a link element (<a></a>) which is used for the default like icon to hover and open the reactions and a div that contains the reactions. Like you can see below:

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

So, what I am trying to do is to show the reactions when I hover over the default like. I tried to use two querySelectorAll one inside the other but it didn’t help in this problem. This is what I tried:

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

What can I do to fix this problem? Thanks in advance!!

Tags:

2

Answers


  1. 0

    I think your approach is a little over complicated. It looks like you have a consistent structure for the tags etc… so I would suggest just putting each set of like button and emoji inside of one container and using querySelectorAll() to grab each container.
    You can iterate over each container and change the visibility of it’s children by toggling classes.

    I’ve included an example that I think takes a pretty simple and vanilla JS approach to this.

    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>
    Login or Signup to reply.
  2. 0

    first of all ‘.post__action–reaction.container’ is not the correct selector. If you are trying to add event listener to your default like button, then you should be listeninig to ‘#default-like-2288’ or just ‘.post__action–reaction’.

    I am assuming you will have multiple default like buttons & containers. You can show and hide the .container elements using the following logic,

        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'})
    })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search