如何选择使用jquery动态添加的类

How can I select a class that dynamically added with jquery?

本文关键字：动态 jquery 添加何选择选择更新时间：2023-09-26

我用jQuery将滚动时活动的类添加到了.content single。我还想在#中添加不同的类，并在动态添加活动类的基础上滚动。

这是我的HTML

<div id="with-scroll" class="single with-scroll">
          <div class="row">
          <div class="outer-navigator"><a href="#" class="tl-navigator three">3</a></div>
          <div class="col s12 center-align third-title">
            <h2>Lorem ipsum dolor sit amet</h2>
          </div>
            <div class="col m6 s6">
                <div class="text-content">
                <h3>Lorem ipsum,<br> 
                    in real time.</h3>
                    <div id="content-single-one" class="content-single">
                    <a href="#scroll1"></a>
                      <i class="material-icons">supervisor_account</i>
                      <h4 id="scroll1" class="section scrollspy">Lorem ipsum dolor sit amet</h4>
                      <p>Lorem ipsum, your workers, your team and
                         companies perform side by side - in real-time.</p>
                    </div>
                    <div id="content-single-two" class="content-single">
                    <a href="#scroll2"></a>
                    <i class="material-icons">av_timer</i>
                      <h4 id="scroll2" class="section scrollspy">Lorem ipsum</h4>
                      <p>Lorem ipsum with the help of screenshotting,<br>
                        screen recording orem ipsum monitoring.<br> 
                        Know exactly what was done and when.
                        </p>
                    </div>
                    <div id="content-single-three" class="content-single">
                    <a href="#scroll3"></a>
                    <i class="material-icons">group_work</i>
                      <h4 id="scroll3" class="section scrollspy">Lorem ipsum</h4>
                      <p>Lorem ipsum, your worers, team and compa nies <br>
                      perform side-by-side - in real-time. <br>
                      Iden tify bottlenecksand getan eagle-eye view <br>
                      of your business. </p>
                    </div>
                </div>
            </div>
            <div class="col m6 s6" id="screen-sticky">
            <div class="screen">
                <img src="images/macbook.png">
                  <div class="inner one">
                    <img src="images/screen-1.png">
                  </div>
                  <div class="inner two">
                    <img src="images/screen-2.png">
                  </div>
                  <div class="inner three">
                    <img src="images/screen-3.png">
                  </div>
                </div>
            </div>
          </div>
        </div>

这是Jquery，我正在尝试选择

$(function() {
  $("#content-single-one.active").each(function(){
    $("#with-scroll").addClass("one");
  });
  $("#content-single-two.active").each(function(){
    $("#with-scroll").addClass("two");
  });
  $("#content-single-three.active").each(function(){
    $("#with-scroll").addClass("three");
  });
});

您可以验证是否有活动的类

$(document).scroll(function(){
    if($("#content-single-one").hasClass('active')){
        $("#with-scroll").addClass("one");
    }else if($("#content-single-two").hasClass('active')){
        $("#with-scroll").addClass("two");
    }else if($("#content-single-three").hasClass('active')){
        $("#with-scroll").addClass("three");
    }
})

这对我有效。你应该修改你的代码：

  $(document).on('change', 'yourSelectingClassId', function(){
    //your code...
  });

我想补充一下会很好。因为我尝试了很多方法，终于奏效了。我希望有需要的人都能看到。