jQuery.不要通过li迭代

Question

有一堆李基本上是真或假的问题.问题是它适用于第一个li而不是下一个,下一个,下一个等

jquery代码是:

<script>

        jQuery(document).ready(function() {

            //Run the each iteration 
            jQuery('#question').each(function(i){

                // Hide the initial values 
                jQuery('#true').hide();
                jQuery('#false').hide();

                var answer = '<?php echo the_sub_field( 'true_or_false' ); ?>';     

                console.log(answer);        

                jQuery("#button").click(function($){
                        $.preventDefault();
                        if( answer == 'True' ) {
                            jQuery('#false').hide();
                            jQuery('#true').show();
                        }
                });

                jQuery("#button2").click(function($){
                        $.preventDefault();                 
                        if( answer == 'True' ) {
                            jQuery('#true').hide();
                            jQuery('#false').show();
                        }
                });

            });                 


        });

    </script>   

HTML代码是:

<li id="question">
        <div id="statement">
            <?php the_sub_field( 'question' ); ?>?
        </div>
        <div id="true">
            <?php the_sub_field( 'true_answer' ); ?>
        </div>
        <div id="false">
            <?php the_sub_field( 'false_answer' ); ?>
        </div>

        <a href="#" id="button">true</a>

        <a href="#" id="button2">false</a>

    </li>

我得到正确的值来检查控制台内部 - 但是每个人似乎都没有为"每个"做这件事.

提前致谢 :)

这是原始输出:

<ul>


    <li id="question">
        <div id="question">
            George likes to sing?
        </div>
        <div id="true">
            You are correct, even when it's out of tune         </div>
        <div id="false">
            Sadly we wish it was false, but it's true           </div>

        <a href="#" id="button">true</a>

        <a href="#" id="button2">false</a>

    </li>

    <script>

        jQuery(document).ready(function() {

            //Run the each iteration 
            jQuery('#question').each(function(i){

                // Hide the initial values 
                jQuery('#true').hide();
                jQuery('#false').hide();

                var answer = 'True';        

                console.log(answer);        

                jQuery("#button").click(function($){
                        $.preventDefault();
                        if( answer == 'True' ) {
                            jQuery('#false').hide();
                            jQuery('#true').show();
                        }
                });

                jQuery("#button2").click(function($){
                        $.preventDefault();                 
                        if( answer == 'True' ) {
                            jQuery('#true').hide();
                            jQuery('#false').show();
                        }
                });

            });                 


        });

    </script>   


    <li id="question">
        <div id="question">
            Aj likes to say the word "WoWoWoWomp"??
        </div>
        <div id="true">
            You are right, almost twenty times a day            </div>
        <div id="false">
            Unfortunately you were wowowo wrong :)          </div>

        <a href="#" id="button">true</a>

        <a href="#" id="button2">false</a>

    </li>

    <script>

        jQuery(document).ready(function() {

            //Run the each iteration 
            jQuery('#question').each(function(i){

                // Hide the initial values 
                jQuery('#true').hide();
                jQuery('#false').hide();

                var answer = 'False';       

                console.log(answer);        

                jQuery("#button").click(function($){
                        $.preventDefault();
                        if( answer == 'True' ) {
                            jQuery('#false').hide();
                            jQuery('#true').show();
                        }
                });

                jQuery("#button2").click(function($){
                        $.preventDefault();                 
                        if( answer == 'True' ) {
                            jQuery('#true').hide();
                            jQuery('#false').show();
                        }
                });

            });                 


        });

    </script>   


</ul>

Answer 1

我假设这<li>是所有人的模式.

鉴于此:id只允许使用一次 ......要么:

1. 更改每种类型的ID(即id ="Question1",id ="Question2"),或
2. 使用类(即class ="Question"),允许一次选择多个元素.

虽然我id="Question"在上面提到过,但这种模式应该仍然适用.一个id 必须是唯一的; 这适用于:问题,陈述,真实,虚假,按钮,按钮2,以及您列出的任何其他ID.