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 itdocument.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 example

createSum何时调用每个函数 (和checkInput)有更多变化。

请查看下面的代码，并指出是否有不明确或未按预期工作的地方。

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;

  createSum();

}

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

  

  const currentPage = $('.tabcontent:visible');

  currentPage.find(".question").text(randomNum1 + " + " + randomNum2 + "=");

  currentPage.find(".question").val('');

  currentPage.find('button[type=submit]').prop('disabled', true);

}

function checkInput() {

  var input = $(this).val(),

   slideSpeed = 200,

   hasInput = !!input,

   valid = hasInput && input == total;

  const currentPage = $('.tabcontent:visible');

  currentPage.find('.message').toggle(!hasInput);

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

  currentPage.find('.success').toggle(valid);

  currentPage.find('.fail').toggle(hasInput && !valid);

}

$(document).ready(function() {

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

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

  // On user input, check value

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

});

body,

html {

  height: 100%;

  margin: 0;

  font-family: Arial;

}

/* Style tab links */

.tablink {

  background-color: #555;

  color: white;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  font-size: 17px;

  width: 25%;

}

.success,

.fail {

  display: none;

}

.message,

.success,

.fail {

  margin-top: 10px;

  margin-bottom: 10px;

}

.container {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

p {

  display: inline;

  margin-right: 5px;

}

input,

button {

  font-family: 'Open Sans';

  font-weight: lighter;

  font-size: 12px;

}

input {

  border: 1px solid #FFBBD7;

  width: 30px;

  height: 20px;

  text-align: center;

}

button {

  border: none;

  border-radius: 1.5em;

  color: #FFF;

  background: #FFBBD7;

  padding: 2.5px 10px;

  width: 75px;

  height: 30px;

  cursor: pointer;

  transition: background .5s ease-in-out;

}

button:hover:enabled {

  background: #303030;

}

button:disabled {

  opacity: .5;

  cursor: default;

}

.tablink:hover {

  background-color: #777;

}

/* Style the tab content (and add height:100% for full page content) */

.tabcontent {

  color: white;

  display: none;

  padding: 100px 20px;

  height: 100%;

}

#Home {

  background-color: red;

}

#News {

  background-color: green;

}

#Contact {

  background-color: blue;

}

#About {

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

  <h3>Home</h3>

  <p>Home is where the heart is..</p>

</div>

<div id="News" class="tabcontent">

  <h3>News</h3>

  <form>

    <p class="question"></p><input class="ans" type="text">

    <div class="message">Please verify.</div>

    <div class="success">Validation complete :)</div>

    <div class="fail">Validation failed :(</div>

    <button type="submit" value="submit">Submit</button>

    <button type="reset" value="reset">Reset</button>

  </form>

</div>

<div id="Contact" class="tabcontent">

  <h3>Contact</h3>

  <form>

    <p class="question"></p><input class="ans" type="text">

    <div class="message">Please verify.</div>

    <div class="success">Validation complete :)</div>

    <div class="fail">Validation failed :(</div>

    <button type="submit" value="submit">Submit</button>

    <button type="reset" value="reset">Reset</button>

  </form>

</div>

<div id="About" class="tabcontent">

  <h3>About</h3>

  <p>Who we are and what we do.</p>

</div>