为什么我的 jQuery 函数不能隐藏/显示元素？答案

【问题标题】：Why don't my jQuery functions work to hide/show elements?为什么我的 jQuery 函数不能隐藏/显示元素？
【发布时间】：2020-09-25 21:03:08
【问题描述】：

我在单击开始按钮之前隐藏问题的第一个功能有效。第二个功能起作用，它显示第一个测验问题并隐藏开始测验按钮。之后，在回答完第一个问题后，我想显示下一个问题并隐藏第一个问题，但它不起作用。

    <button id="btn1">High Scores</button>
    <button id="btn2">Start Quiz</button>
    
    <p class='question1'>Question 1:<br><br>
        "What does HTML stand for?"<br><br>
        <button id="btnA">A  Hyper text Markeup Language</button><br>
        <button id="btnB">B Hyperlinks and Text Markup Languages</button><br>
        <button id="btnC">C Home Tool Markup Language</button><br></p>
        
    <p class='question2'>Question 2:<br><br>
        "What does CSS stand for?"<br><br>
        <button id="btn2A">A  Completely Self Sufficient</button><br>
        <button id="btn2B">B Computer Style Sheet</button><br>
        <button id="btn2C">C Cascading Style Sheet</button><br></p>

    <p class='question3'>Question 3:<br><br>
        "What is the purpose of a Bootcamp?"<br><br>
        <button id="btn3A">A  To teach you perseverance</button><br>
        <button id="btn3B">B To teach you to find your own solutions</button><br>
        <button id="btn3C">C Both A and B</button><br></p>

    <p class='question4'>Question 3:<br><br>
        "What is the correct way to link a javascript file?"<br><br>
        <button id="btn4A">A  Make sure it appears within the body section</button><br>
        <button id="btn4B">B Use the script tags</button><br>
        <button id="btn4C">C There is no need for a link, html finds it on its own</button><br></p>  
</div>

<script>
var score = 0

    // hides the question until start quiz is clicked
    $(document).ready(function() {
    $('.question1').hide();
    });

    // start button is clicked, shows the first question and hides start button
    $('#btn2').on('click', function() {
        $('.question1').show();
        $('#btn2').hide();
    });

    // When an answer is clicked, the question gets hidden and the next question is shown.
    $('#btnA').on('click', function() {
        $('.question1').hide();
        $('.question2').show();
        score++
    });

    $('#btnB').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });

    $('#btnC').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });


    
</script>

【问题讨论】：

您在第一个问题之后的 id 上没有任何绑定。除非您让它们做某事，否则单击这些按钮不会有任何作用。

标签： jquery function show-hide

【解决方案1】：

如果你这样做，你的 javascript 会很长。

您可以在这些行中完成所有工作

// For adding scores
$('#btnA, #btn2B, #btn3x, ....').click(function() { 
  score++; 
});

// for hiding and showing 
// do change all classes to just 'question'
// or use [class^=question] as the selector
$('.question > button').click(function() {
  $(this).parent().hide().next('.question').show();
});

【讨论】：

感谢您的帮助。因为我刚刚开始使用 javascript 和 jquery，所以我不太了解您的解决方案。此时我正在学习，如果我的代码很长也没关系，当我知道如何做得更好时，我会改进它。谢谢！

【解决方案2】：

您的按钮触发器不在您的 DO READY 范围内

   $(document).ready(function() {
    $('.question1').hide();
    //});// close this at the end...

    // start button is clicked, shows the first question and hides start button
    $('#btn2').on('click', function() {
        $('.question1').show();
        $('#btn2').hide();
    });

    // When an answer is clicked, the question gets hidden and the next question is shown.
    $('#btnA').on('click', function() {
        $('.question1').hide();
        $('.question2').show();
        score++
    });

    $('#btnB').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });

    $('#btnC').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });
}); // close dom ready here

【讨论】：