Question

这是我的标记：

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

这是我点击事件的脚本：

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

因此，setActive应该添加＆＃34; active-section＆＃34;我正在动态构建的锚标签内的Div。但我不确定我是否正确这样做。

Answer 1

将ja代码中的click事件绑定到基于其类的js代码而不是将其添加到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>

然后将click事件绑定到该类的所有元素：

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

Answer 2

我会在你的代码中取消资本化DIV和其他一些东西，但是如果我理解你想要做什么，这应该有用。

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

Answer 3

您正在使用$（this）而不将任何参数传递给函数。

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

使用jquery，选择要将类添加到其中的元素并使用addClass("class_to_add")函数。

如何在Click事件上添加一个类

3 个答案: