javascript - 根据总分移动到不同的 anchor 标签

Question

我有多项选择题，根据渐进分数，用户需要转向不同的问题。例如，每个问题有 4 个答案，每个答案都有一个分数。

Question 1
Answer 1 = 5 points
Answer 2 = 10 points
Answer 3 = 15 points
Answer 4 = 20 points

Question 2
Answer 1 = 5 points
Answer 2 = 10 points
Answer 3 = 15 points
Answer 4 = 20 points

条件是在后端设置的，我可以说如果总分是 25，则转到问题 7，否则如果除 25 以外的任何其他分数，则继续进行下一个问题，即:问题 3。

我只是使用 anchor 标签在问题之间移动。如果你看看下面的逻辑部分，我就会被绊倒。跳转到逻辑需要与当前分数进行比较。为了精确定位这条线，就是这条线:

 <?php if( get_field( 'go_to' )  && get_sub_field( 'score' ) == // CURRENT SCORE): ?>

每次用户单击单选按钮选项时，当前分数都会发生变化。

$().ready(function(){
function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
        score+=parseInt($(this).val());
    });  
}
    $(".calc").change(function(){
        calcscore()
    });
});

PHP:

<?php if ($questions->have_posts() ):
            while ($questions->have_posts() ): $questions->the_post();

?>
<!--Show Question-->
   <div class="question-container" id="<?php echo get_the_ID(); ?>">
    <div class="question">
        <h5><?php the_title(); ?></h5>


        <!-- Show answers-->

        <?php if (have_rows( 'answers' ) ):
                while (have_rows( 'answers' ) ): the_row();
        ?>
            <input type="radio" name="input<?php echo get_the_ID(); ?>" id="input<?php echo get_row_index(); ?>" value="<?php echo get_sub_field( 'score' ); ?>" class="calc">
            <label for="input<?php echo get_row_index(); ?>"><?php echo get_sub_field( 'answer' ); ?></label>
        <?php endwhile; ?>
        <?php endif; ?>



        <!--logic-->
        <?php if (have_rows( 'condition' ) ):
                    while (have_rows( 'condition' ) ): the_row();

        ?>     
            <?php if( get_field( 'go_to' )  && get_sub_field( 'score' ) == // CURRENT SCORE): ?>
             <a href="#<?php echo get_field( 'go_to' )->ID; ?>" class="next-btn">Next</a>
            <?php else: ?>
             <a href="#<?php echo get_the_ID() + 1; ?>" class="next-btn">Next</a>
            <?php endif; ?>

        <?php endwhile; ?>
        <?php endif; ?>
        <!--end logic-->


        <!-- end show answers-->
    </div>
</div>
<!--End Question-->
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>

Answer 1

让我们用 JavaScript 来实现这一点。您已经有一个 JS 函数，该函数在每次单击答案时运行。在此函数中，您有一个在每个 radio 按钮上循环的 each...

$(".calc:checked").each(function(){...}

单选按钮名称与 anchor 名称相关联，对吧？ 让我们使用该连接!所以尝试添加...

if(this.prop('checked')) { // we only care about ANSWERED questions
    var newanchorlink = 'input' + parseInt($(this).attr('name').replace('input', ''), 10) + 1;
    $('.next-btn').attr('href', '#' + newanchorlink);
}

您应该看到这里发生了什么:您的单选按钮具有属性 name="input(SOMENUMBER)"，因此，我采用该属性，将“input”替换为“”，将其解析为一个整数，加 1，并将其与单词“input”连接起来。我要做的第二件事就是更改 href 以链接到我们的新 URL。

但这仅在各种条件下有效:您的输入是增量的，即 input1、input2 等。您的输入必须具有 input(somenumber) 的 name 属性，它不适用于 nextinput(somenumber)。此外，我们还通过输入列表中最后一个满足条件 prop('checked') 的方式来检查某些内容是否得到回答，如果您更改订单或使用其他输入，则需要重新编码.

当然，我自己没有测试过!这里发生了很多事情，对于制作演示来说有点多。但我希望这会有所帮助!