Question

我不确定我的jQuery选择器是否是问题，或者它是否是我的jQuery代码。

我正在尝试在<i>上添加点击事件，点击它时会将类添加到右侧below-fold-child-text，使其显示在屏幕外部并显示在页面上。

我想知道我是否设置了我的html错误，<i>是否在.below-fold-child-text div内？我在哪里可以找到一些很好的例子？我的jQuery选择器都错了吗？

谢谢！

到目前为止，这是我的jQuery代码：

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

我的Sass代码：

&-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;
                }


            }

我的HTML代码：

<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：如果有更好的方式提出这个问题，请告诉我。我是StackOverflow的新手。

Answer 1

我想我可能找到了解决方案！非常感谢所有回复并提出编辑建议的人。帮助我在盒子外思考并向我展示$（“class”，this）的意思。干杯！

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

jQuery $ this + sibling element调用不起作用

1 个答案: