jQuery $ this +同级元素调用不起作用

Question

I'm not sure if my jQuery selectors are the problem or if it's my jQuery code.

I am trying to add a click event on <i> that when clicked it adds class to right below-fold-child-text making it appear from outside the screen and visible on the page.

I'm wondering if I'm setting up my html all wrong, should <i> be inside the .below-fold-child-text div? Where do I find some good examples of this being implemented? Is my jQuery selector all wrong?

Thank you!

This is my jQuery code so far:

$(".fly-in").each(function(){
    $(this).on("click", function() {
    //    $(this).find(".below-fold-child-text").toggleClass(".left-show");
       $(".right .below-fold-child-text",this).toggleClass(".left-show");
    });
}); 

My Sass code:

&-text {
        background: $orange;
        color: $white;
        position: absolute;
        width: 40%; 
        top: 0px;
        z-index: 4;
        height: 100%;
        padding: 30px;

        &.left {
            // transform: translateX(0);
               transform: translateX(-999999px);
              &-show {
                 transform: translateX(0px);
                }
             }

                &.right {
                    // transform: translateX(623px);
                    transform: translateX(99999px);
                    &-show {
                        transform: translateX(623px);
                    }
                }

                h3 {
                    text-transform: uppercase;
                    font-size: 130%;

                }
                p {
                    font-size: 110%;
                }

                h3,p {
                    margin: 0;
                }


            } 

My html code:

<div class="below-fold-child">
  <img src="https://placehold.it/800x200">
  <div class="right below-fold-child-text">
             <h3>Title</h3>
             <p>Lorem Ipsum dolor content goes here</p>
         </div>
         <i class="right fly-in fa fa-times-circle" aria-hidden="true"></i>
     </div>

     <div class="below-fold-child">
         <img src="https://placehold.it/800x200">
         <div class="left below-fold-child-text">
             <h3>A short history of florida</h3>
             <p>The first people reached Florida before 10,000 BC. They were hunters and gatherers. At the time the world was in grip of an ice age and huge animals like mastodons roamed what is now Florida. After the end of the ice age shellfish were abundant and by 2,000 BC the people of Florida were making pottery. Ater 1,500 BC they also built burial mounds.</p>
         </div>
         <i class="left fly-in fa fa-times-circle" aria-hidden="true"></i>
    </div> 

PS: If there's a better way to have asked this question please let me know too. I'm very new to StackOverflow.

Answer 1

I think I may have found the solution! Thank you so much for everyone that responded and made edit suggestions. Helped me think outside the box and showed me what $("class", this) meant. Cheers!

$(".below-fold-child").each(function(){
    var toSelect = $(".below-fold-child-text",this); 
    $(".toclick", this).on("click", function(){
        console.log(toSelect)
        $(toSelect).toggleClass("right-show")
    });
});