根据总分移动到不同的锚标签

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。

我只是使用锚标签在问题之间移动。如果您查看下面的逻辑部分，我就会被绊倒。跳转到逻辑需要当前分数进行比较。要查明这条线，就是这条线：

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

Answer 1

让我们在 JavaScript 中执行此操作。您已经有一个 JS 函数，它会在每次单击答案时运行。在此功能中，您each在每个按钮上都有一个循环radio...$(".calc:checked").each(function(){...}单选按钮名称连接到锚点名称，对吗？ 让我们使用那个连接！ 所以尝试添加这个...if(this.prop('checked')) { // we only care about ANSWERED questions&nbsp; &nbsp; var newanchorlink = 'input' + parseInt($(this).attr('name').replace('input', ''), 10) + 1;&nbsp; &nbsp; $('.next-btn').attr('href', '#' + newanchorlink);}您应该看到这里发生了什么：您的单选按钮具有属性name="input(SOMENUMBER)"，因此，我采用该属性，将“input”替换为“”，将其解析为整数，将其加 1，然后将其与单词“input”连接起来。我正在做的第二件事就是更改 href 以链接到我们的新 URL。但是，这仅在各种条件下有效：您的输入是增量的，即input1,input2等。您的输入必须具有name的属性input(somenumber)，它不适用于nextinput(somenumber). 此外，我们正在检查是否通过满足条件的输入列表中的最后一项来回答某些问题prop('checked')，如果您更改订单或使用其他输入，这将需要重新编码。当然，我自己没有测试过！这里发生了很多事情，制作演示有点多。但我希望这会有所帮助！