Maths Capture 需要添加到同一 html 页面上的两个选项卡？

Question

我附上了一个显示代码的片段。我正在尝试在同一 HTML 页面上的两个不同选项卡上添加两个 Math Capture。

因此，在“新闻”选项卡上，捕获工作正常，但在“联系方式”选项卡上，数学问题不会只显示一个空白框。

但是联系人选项卡中的提交按钮在新闻选项卡中有效，但它使用新闻选项卡中的数学问题是错误的。

我不确定如何让它在两个页面上都起作用？

希望你能帮忙？？

谢谢

蒂姆

function openPage(pageName, elmnt, color) {

  // Hide all elements with class="tabcontent" by default */

  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";

  }

  // Remove the background color of all tablinks/buttons

  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].style.backgroundColor = "";

  }

  // Show the specific tab content

  document.getElementById(pageName).style.display = "block";

  // Add the specific color to the button used to open the tab content

  elmnt.style.backgroundColor = color;

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

var total;

function getRandom(){return Math.ceil(Math.random()* 20);}

function createSum(){

        var randomNum1 = getRandom(),

            randomNum2 = getRandom();

    total =randomNum1 + randomNum2;

  $( "#question" ).text( randomNum1 + " + " + randomNum2 + "=" );  

  $("#ans").val('');

  checkInput();

}

function checkInput(){

        var input = $("#ans").val(), 

        slideSpeed = 200,

      hasInput = !!input, 

      valid = hasInput && input == total;

    $('#message').toggle(!hasInput);

    $('button[type=submit]').prop('disabled', !valid);  

    $('#success').toggle(valid);

    $('#fail').toggle(hasInput && !valid);

}

$(document).ready(function(){

    //create initial sum

    createSum();

    // On "reset button" click, generate new random sum

    $('button[type=reset]').click(createSum);

    // On user input, check value

    $( "#ans" ).keyup(checkInput);

});

Answer 1

主要问题是您对多个元素使用相同的 id，id应该是唯一的。我的建议是使用class并使选择器“相对于”可见选项卡const currentPage = $('.tabcontent:visible');currentPage.find('.message').toggle(!hasInput); // for examplecreateSum何时调用每个函数 (和checkInput)有更多变化。请查看下面的代码，并指出是否有不明确或未按预期工作的地方。function openPage(pageName, elmnt, color) {&nbsp; // Hide all elements with class="tabcontent" by default */&nbsp; var i, tabcontent, tablinks;&nbsp; tabcontent = document.getElementsByClassName("tabcontent");&nbsp; for (i = 0; i < tabcontent.length; i++) {&nbsp; &nbsp; tabcontent[i].style.display = "none";&nbsp; }&nbsp; // Remove the background color of all tablinks/buttons&nbsp; tablinks = document.getElementsByClassName("tablink");&nbsp; for (i = 0; i < tablinks.length; i++) {&nbsp; &nbsp; tablinks[i].style.backgroundColor = "";&nbsp; }&nbsp; // Show the specific tab content&nbsp; document.getElementById(pageName).style.display = "block";&nbsp; // Add the specific color to the button used to open the tab content&nbsp; elmnt.style.backgroundColor = color;&nbsp; createSum();}// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();var total;function getRandom() {&nbsp; return Math.ceil(Math.random() * 20);}function createSum() {&nbsp; var randomNum1 = getRandom(),&nbsp; &nbsp; randomNum2 = getRandom();&nbsp; total = randomNum1 + randomNum2;&nbsp;&nbsp;&nbsp; const currentPage = $('.tabcontent:visible');&nbsp; currentPage.find(".question").text(randomNum1 + " + " + randomNum2 + "=");&nbsp; currentPage.find(".question").val('');&nbsp; currentPage.find('button[type=submit]').prop('disabled', true);}function checkInput() {&nbsp; var input = $(this).val(),&nbsp; &nbsp;slideSpeed = 200,&nbsp; &nbsp;hasInput = !!input,&nbsp; &nbsp;valid = hasInput && input == total;&nbsp; const currentPage = $('.tabcontent:visible');&nbsp; currentPage.find('.message').toggle(!hasInput);&nbsp; currentPage.find('button[type=submit]').prop('disabled', !valid);&nbsp; currentPage.find('.success').toggle(valid);&nbsp; currentPage.find('.fail').toggle(hasInput && !valid);}$(document).ready(function() {&nbsp; // On "reset button" click, generate new random sum&nbsp; $('button[type=reset]').click(createSum);&nbsp; // On user input, check value&nbsp; $(".ans").keyup(checkInput);});body,html {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; font-family: Arial;}/* Style tab links */.tablink {&nbsp; background-color: #555;&nbsp; color: white;&nbsp; float: left;&nbsp; border: none;&nbsp; outline: none;&nbsp; cursor: pointer;&nbsp; padding: 14px 16px;&nbsp; font-size: 17px;&nbsp; width: 25%;}.success,.fail {&nbsp; display: none;}.message,.success,.fail {&nbsp; margin-top: 10px;&nbsp; margin-bottom: 10px;}.container {&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; top: 50%;&nbsp; transform: translate(-50%, -50%);}p {&nbsp; display: inline;&nbsp; margin-right: 5px;}input,button {&nbsp; font-family: 'Open Sans';&nbsp; font-weight: lighter;&nbsp; font-size: 12px;}input {&nbsp; border: 1px solid #FFBBD7;&nbsp; width: 30px;&nbsp; height: 20px;&nbsp; text-align: center;}button {&nbsp; border: none;&nbsp; border-radius: 1.5em;&nbsp; color: #FFF;&nbsp; background: #FFBBD7;&nbsp; padding: 2.5px 10px;&nbsp; width: 75px;&nbsp; height: 30px;&nbsp; cursor: pointer;&nbsp; transition: background .5s ease-in-out;}button:hover:enabled {&nbsp; background: #303030;}button:disabled {&nbsp; opacity: .5;&nbsp; cursor: default;}.tablink:hover {&nbsp; background-color: #777;}/* Style the tab content (and add height:100% for full page content) */.tabcontent {&nbsp; color: white;&nbsp; display: none;&nbsp; padding: 100px 20px;&nbsp; height: 100%;}#Home {&nbsp; background-color: red;}#News {&nbsp; background-color: green;}#Contact {&nbsp; background-color: blue;}#About {&nbsp; background-color: orange;}<title>captcha</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript" src="captcha.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><link rel="stylesheet" type="text/css" href="style.css"><button class="tablink" onclick="openPage('Home', this, 'red')">Home</button><button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button><button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button><button class="tablink" onclick="openPage('About', this, 'orange')">About</button><div id="Home" class="tabcontent">&nbsp; <h3>Home</h3>&nbsp; <p>Home is where the heart is..</p></div><div id="News" class="tabcontent">&nbsp; <h3>News</h3>&nbsp; <form>&nbsp; &nbsp; <p class="question"></p><input class="ans" type="text">&nbsp; &nbsp; <div class="message">Please verify.</div>&nbsp; &nbsp; <div class="success">Validation complete :)</div>&nbsp; &nbsp; <div class="fail">Validation failed :(</div>&nbsp; &nbsp; <button type="submit" value="submit">Submit</button>&nbsp; &nbsp; <button type="reset" value="reset">Reset</button>&nbsp; </form></div><div id="Contact" class="tabcontent">&nbsp; <h3>Contact</h3>&nbsp; <form>&nbsp; &nbsp; <p class="question"></p><input class="ans" type="text">&nbsp; &nbsp; <div class="message">Please verify.</div>&nbsp; &nbsp; <div class="success">Validation complete :)</div>&nbsp; &nbsp; <div class="fail">Validation failed :(</div>&nbsp; &nbsp; <button type="submit" value="submit">Submit</button>&nbsp; &nbsp; <button type="reset" value="reset">Reset</button>&nbsp; </form></div><div id="About" class="tabcontent">&nbsp; <h3>About</h3>&nbsp; <p>Who we are and what we do.</p></div>