Javascript 每一个都不是通过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>   

jQuery（文档）.ready（函数（）{
//在每次迭代中运行
jQuery（“#问题”）。每个（函数（i）{
//隐藏初始值
jQuery（'#true'）.hide（）；
jQuery（'#false'）.hide（）；
var-answer=''；
控制台日志（应答）；
jQuery（“按钮”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#false'）.hide（）；
jQuery（'#true'）.show（）；
}
});
jQuery（“#按钮2”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#true'）.hide（）；
jQuery（'#false'）.show（）；
}
});
});                 
});

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>

?

我在控制台中得到了正确的值来进行检查，但是each似乎并不是为“each”这样做的

提前感谢：）

以下是原始输出：

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

乔治喜欢唱歌？
你是对的，即使它走调了
不幸的是，我们希望这是假的，但这是真的

jQuery（文档）.ready（函数（）{
//在每次迭代中运行
jQuery（“#问题”）。每个（函数（i）{
//隐藏初始值
jQuery（'#true'）.hide（）；
jQuery（'#false'）.hide（）；
var-answer='True'；
控制台日志（应答）；
jQuery（“按钮”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#false'）.hide（）；
jQuery（'#true'）.show（）；
}
});
jQuery（“#按钮2”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#true'）.hide（）；
jQuery（'#false'）.show（）；
}
});
});                 
});

Aj喜欢说“wowo”这个词？？
你说得对，几乎每天20次
不幸的是，你错了：）

jQuery（文档）.ready（函数（）{
//在每次迭代中运行
jQuery（“#问题”）。每个（函数（i）{
//隐藏初始值
jQuery（'#true'）.hide（）；
jQuery（'#false'）.hide（）；
var-answer='False'；
控制台日志（应答）；
jQuery（“按钮”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#false'）.hide（）；
jQuery（'#true'）.show（）；
}
});
jQuery（“#按钮2”）。单击（函数（$）{
$.preventDefault（）；
如果（答案=='True'）{
jQuery（'#true'）.hide（）；
jQuery（'#false'）.show（）；
}
});
});                 
});

我假设这是所有人的模式

鉴于此：

id

只允许使用一次。。。要么：

更改每种类型的id（即id=“Question1”，id=“Question2”），或

使用允许一次选择多个元素的类（即class=“Question”）

---

虽然我在上面引用了

id=“Question”

，但这个模式应该保持正确。

id

必须是唯一的；这适用于：问题、陈述、真、假、按钮、按钮2以及您列出的任何其他id。

我假设这是所有id的模式

鉴于此：

id

只允许使用一次。。。要么：

更改每种类型的id（即id=“Question1”，id=“Question2”），或

使用允许一次选择多个元素的类（即class=“Question”）

---

虽然我在上面引用了

id=“Question”

，但这个模式应该保持正确。

id

必须是唯一的；这适用于：问题、语句、true、false、button、button2和您列出的任何其他id。

最好使用类来迭代项目。Id只能使用一次（用于访问唯一元素）。请参见下面的示例

Jquery代码

$('div#questions ul li.answer').each(function() {
    console.log($(this).text());
});

Html

正确
正确
错误
错误
正确

最好使用类来迭代项。Id只能使用一次（用于访问唯一元素）。请参见下面的示例

Jquery代码

$('div#questions ul li.answer').each(function() {
    console.log($(this).text());
});

Html

正确
<ul>
    <li>
        <div class="question">George likes to sing?</div>
        <div class="true">You are correct, even when it's out of tune</div>
        <div class="false">Sadly we wish it was false, but it's true</div> <a href="#" class="button">true</a>
 <a href="#" class="button2">false</a>

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

    </li>
</ul>

jQuery(document).ready(function () {
    // hide the answers    
    jQuery('.true, .false').hide();

    // show answer based on click
    jQuery('.button').click(function (e) {
        e.preventDefault();
        jQuery(this).closest('li').find('.true').show();
        jQuery(this).closest('li').find('.false').hide();
    });
    jQuery('.button2').click(function (e) {
        e.preventDefault();
        jQuery(this).closest('li').find('.false').show();
        jQuery(this).closest('li').find('.true').hide();
    });

});