Question

我在第一个元素上有一个活动类，当我点击锚点向下一个元素添加活动类时，我想要用javascript获取活动类的元素的id和类。

我想通过使用$（this）来做到这一点。我该怎么做？

＆＃13;

  <p class="question active" id="q_1">
    Question 1?
  </p>
  <p class="question " id="q_2">
    Question 2?
  </p>
  <p class="question " id="q_3">
    Question 3?
  </p>
  <p class="question " id="q_4">
    Question 4?
  </p>
  <p class="question " id="q_5">
    Question 5?
  </p>

  <a class="button" href=""></a>

＆＃13;

我已经使用了下一个jquery代码，但我不喜欢这样：

＆＃13;

$('.button').on('click', function(e){
    e.preventDefault();
    $('.active').removeClass('active').hide().next().show().addClass('active');
});

＆＃13;

Answer 1

next并不总是有效。例如，当活动元素是最后一个（在示例中为q_5时），next将返回一个空的jQuery集合。

如果可以的话，最好避免在jQuery中使用show和hide。使用您的active课程。

＆＃13;

$('a').click(function(e){
    e.preventDefault();
    
    var $next = $('p.active').removeClass('active').next('p.question');

    if (!$next.length) {
        $next = $('#q_1');
    }

    $next.addClass('active');
});

＆＃13;

p:not(.active) {
    display : none;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="question active" id="q_1">
    Question 1?
  </p>
  <p class="question " id="q_2">
    Question 2?
  </p>
  <p class="question " id="q_3">
    Question 3?
  </p>
  <p class="question " id="q_4">
    Question 4?
  </p>
  <p class="question " id="q_5">
    Question 5?
  </p>

  <a class="button" href="">Change</a>

＆＃13;

Answer 2

试试这个：

<script type="text/javascript">
$('.button').on('click', function(e){
    e.preventDefault();
    var a = $('.active').removeClass('active').next();
    if(a.hasClass('question')){
        a.addClass('active');
    }else{
    $("#q_1").addClass('active');
    }
});
</script>

Answer 3

类似于已添加的答案，但在这里我们编码（未测试）：

$('.button').click(function() {
    if ($('p.question').length > 0) {
        $('p.question').each(function() {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                var thisIndex = parseInt($(this).attr('id').match(/\d+/));
                if (thisIndex < $('p.question').length) {
                    $('#q_' + (thisIndex + 1)).addClass('active');
                }
                else  $('#q_1').addClass('active');
            }
        });
    }
});

*********************** EDIT *********************

$(this).click(function() {
    if (!$(this).hasClass('active')) {
        $('.active').removeClass('active');
        $(this).addClass('active');
    }
})

Answer 4

您需要绑定锚标记并添加/删除活动类

$('a').click(function(e){
    e.preventDefault();
    $('p.active').removeClass('active').next('p.question').addClass('active')
});

JsFiddle

修改

基于注释 - 使用纯js（没有jQuery）执行此操作我们可以使用以下代码

 Question 1? Question 2? Question 3? Question 4? Question 5? <a class="button" href="#" onClick='return SelectNextQ()'>Click me</a> function SelectNextQ(){ var allQs = document.getElementsByClassName('question'); var bFound = false; for(var i=0; i<allQs.length; i++){ if(bFound){ allQs[i].className = allQs[i].className + ' active'; return false; // break from loop } if(allQs[i].className.indexOf('active') > -1){ bFound = true; allQs[i].className = 'question'; } } return false; }

JSFiddle

如何在每次锚点击时选择具有唯一ID的下一个元素？

4 个答案: