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

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 id="question"></p><input id="ans" type="text">
            <div id="message">Please verify.</div>
            <div id="success">Validation complete :)</div>
            <div id="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 id="question"></p><input id="ans" type="text">
            <div id="message">Please verify.</div>
            <div id="success">Validation complete :)</div>
            <div id="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>

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>