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仅允许一次使用 ......：

更改每种类型的ID（即id =“Question1”，id =“Question2”）或
使用类（即class =“Question”），允许一次选择多个元素。

虽然我在上面引用了id="Question"，但这种模式应该仍然是正确的。 id 必须是唯一的;这适用于：问题，声明，真实，虚假，按钮，按钮2以及您列出的任何其他ID。

Answer 2

您不需要迭代。用id替换class并重写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。

Answer 3

最好使用一个类来迭代项目。 Id应该只使用一次（用于访问唯一元素）。请参阅以下示例。

Jquery Code。

$('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>

jQuery。不要通过li迭代

3 个答案: