Javascript 如何在单击事件时添加类

这是我的标记：

  <a href="#section-one" onclick="setActive();"><div class="section-dots active-section"></div></a>
        <a href="#section-two"><div class="section-dots"></div></a>
        <a href="#section-three"><div class="section-dots"></div></a>
        <a href="#section-four"><div class="section-dots"></div></a>

以下是我的JavaScript代码：

• 注意，我正在使用以下Jquery代码动态构建标记：

  <script>
      var count = 1;
      var next;
      var url;
      var elementId;
  
      // First remove all of the dots
      $('.section-dots-container').empty();
  
      $('H2').each(function () {
  
          elementId = 'section-' + count;
          url = '#section-' + count;
          $(this).attr('id', elementId);
          $('.section-dots-container').append('<a href="' + url + '" onclick="setActive();"><DIV Class="section-dots"></DIV></a>');
  
          count++;
      });
  
  
  </script>
  

  
  var计数=1；
  var-next；
  var-url；
  元素变种；
  //首先去掉所有的点
  $（'.section dots container'）.empty（）；
  $（'H2'）。每个（函数（）{
  elementId='节-'+计数；
  url='#节-'+计数；
  $（this.attr（'id'，elementId）；
  $（'.section dots container'）。追加（''）；
  计数++；
  });
  

这是我的单击事件脚本：

<script>
    function setActive() {
        next = $(this).find('.section-dots');
        next.addClass("active-section");
    }
</script>

函数setActive（）{
next=$（this.find（'.section dots'）；
next.addClass（“活动段”）；
}

---

因此，setActive应该将“active section”添加到我正在动态构建的锚标记内的Div中。但是我不确定我是否正确地执行了此操作。

我会取消DIV的大写字母以及代码中的其他一些内容，但是如果我理解您想要做什么，这应该会起作用

$('.section-dots').click(function(){
  $(this).addClass('active-section');
});

---

在js代码中，基于类将click事件绑定到元素上似乎比将其添加到html中更容易

因此，可以更改标记以包含一个公共类名，如：

<a href="#section-one" class="section"><div class="section-dots active-section"></div></a>
<a href="#section-two" class="section"><div class="section-dots"></div></a>
<a href="#section-three" class="section"><div class="section-dots"></div></a>
<a href="#section-four" class="section"><div class="section-dots"></div></a>

您正在使用$（this），但未向函数传递任何参数

<script>
function setActive() {
    next = $(this).find('.section-dots');
    next.addClass("active-section");
}
</script>

函数setActive（）{
next=$（this.find（'.section dots'）；
next.addClass（“活动段”）；
}

---

使用jquery，选择要将类添加到其中的元素，并使用

addClass（“class\u to\u add”）

函数。

'section-'+count

将返回

section-1

，但您不想要

section-1

？除此之外，代码看起来应该可以工作，不是吗？

<script>
function setActive() {
    next = $(this).find('.section-dots');
    next.addClass("active-section");
}
</script>