jQuery .each 不遍历 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>

我正在获取正确的值以在控制台内部进行检查 - 但是 "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>

Answer 1

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

鉴于此：id 只允许使用一次 ... 或者：

更改每种类型的 id（即 id="Question1"、id="Question2"）或
使用 classes（即 class="Question"），这将允许一次选择多个元素。

虽然我在上面引用了 id="Question"，但这种模式应该保持不变。 id 必须是唯一的；这适用于：问题、陈述、真、假、按钮、按钮 2 以及您列出的任何其他 ID。

Answer 2

最好使用 class 遍历项目。 Id 只能使用一次（用于访问唯一元素）。请参阅以下示例。

Jquery代码.

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

Html.

<div id="questions">
<ul>
    <li class="answer">True</li>
    <li class="answer">True</li>
    <li class="answer">False</li>
    <li class="answer">False</li>
    <li class="answer">True</li>
</ul>
</div>

Answer 3

你不需要迭代。用 class 替换 id 并重写 jquery 大大缩短了代码。这是 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，它只需要出现一次，而不是像上面那样出现多次。一组函数处理所有的问题/答案。 -

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();
    });

});

您也是运行一个不必要的测试，用于查看变量是否已设置，因为按原样设置的变量始终已设置，因此已将其从代码中删除。

这是一个有效的 example。

jQuery .each 不遍历 li

jQuery .each not iterating through li

html

javascript

php

wordpress

jquery