复制的按钮无法打开

时间：2019-04-25 18:22:25

标签： javascript html css-selectors css-transitions

在我的网站http://the-stone-quest.000webhostapp.com/test/test1.html上，您可以看到左侧按钮可以正常工作，并且我希望这些按钮上有多个按钮，所以我认为您可以复制代码并使用相同的脚本，但是版本永远无法使用，我也不明白为什么。如果您转到该页面，您将理解我的意思。如何使另一个按钮起作用？

在这里左边的那个也不起作用，但是在我的网站上可以。

var formContainer = $('#form-container');

bindFormClick();
//Opening the form
function bindFormClick() {
  $(formContainer).on('click', function(e) {
    e.preventDefault();
    toggleForm();
    //Ensure container doesn't togleForm when open
    $(this).off();
  });
}

//Closing the form
$('#form-close, .form-overlay').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  toggleForm();
  bindFormClick();
});

function toggleForm() {
  $(formContainer).toggleClass('expand');
  $(formContainer).children().toggleClass('expand');
  $('body').toggleClass('show-form-overlay');
  $('.form-submitted').removeClass('form-submitted');
}

//Form validation
$('form').submit(function() {
  var form = $(this);
  form.find('.form-error').removeClass('form-error');
  var formError = false;

  form.find('.input').each(function() {
    if ($(this).val() == '') {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    } else if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    }
  });

  if (!formError) {
    $('body').addClass('form-submitted');
    $('#form-head').addClass('form-submitted');
    setTimeout(function() {
      $(form).trigger("reset");
    }, 1000);
  }
  return false;
});

function isValidEmail(email) {
  var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
  return pattern.test(email);
};

social("twitter/joeharry__", "codepen/woodwork",
  "disco");
body {
  font-family: Roboto, sans-serif;
  width: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1,
h2 {
  font-weight: 700;
  color: #FFF;
  font-weight: 700;
  font-size: 4em;
  margin: 0;
  padding: 0 20px;
}

.form-overlay {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0;
  background: #000;
  transition: background 1s, opacity 0.4s, width 0s 0.4s;
}

.show-form-overlay .form-overlay {
  width: 100%;
  opacity: 0.7;
  z-index: 999;
  transition: background 1s, opacity 0.4s, width 0s;
}

.show-form-overlay.form-submitted .form-overlay {
  background: #119DA4;
  transition: background 0.6s;
}

#form-container {
  cursor: pointer;
  color: #FFF;
  z-index: 1000;
  position: sticky;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5vh;
  background-color: #f72f4e;
  overflow: hidden;
  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}

#form-container.expand {
  cursor: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  border-radius: 0;
  width: 70%;
  height: 350px;
  max-width: 610px;
  padding: 0;
  transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}

#form-close {
  cursor: pointer;
}

.icon::before {
  cursor: pointer;
  font-size: 30px;
  line-height: 60px;
  display: block;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon:hover::before {
  -webkit-animation: wiggle 0.1s linear infinite;
  animation: wiggle 0.1s linear infinite;
}

.fa-pencil::before {
  display: block;
}

.fa-close::before {
  display: none;
}

.expand.fa-pencil::before {
  display: none;
}

.expand.fa-close::before {
  display: block;
  -webkit-animation: none;
  animation: none;
}

#form-content {
  font-family: Roboto, sans-serif;
  -webkit-transform: translateY(150%);
  transform: translateY(150%);
  width: 100%;
  opacity: 0;
  text-align: left;
  transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#form-content.expand {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

#form-content form {
  color: #FFF;
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  text-align: left;
}

#form-head {
  font-size: 100%;
  padding: 0;
  margin: 0 20px;
  color: #FFF;
  text-align: center;
  transition: all 0.8s 0.6s;
}

#form-head h1,
#form-head p {
  padding: 0;
  margin: 5;
}

#form-head .pre {
  display: block;
}

#form-head .post {
  display: none;
}

.form-submitted#form-head {
  -webkit-transform: translateY(250%);
  transform: translateY(250%);
}

.form-submitted#form-head .pre {
  display: none;
}

.form-submitted#form-head .post {
  display: block;
}

.input {
  background: rgba(0, 0, 0, 0.2);
  display: block;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  border-width: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

::-webkit-input-placeholder {
  /* Safari, Chrome and Opera */
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}


/* Firefox 18- */

:-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}


/* Firefox 19+ */

::-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}


/* IE 10+ */

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}


/* Edge */

::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}


/* Default */

:placeholder-shown {
  color: rgba(255, 255, 255, 0.8);
  font-size: 90%;
}

input,
select,
textarea {
  color: #FFF;
}

.input.message {
  resize: none;
  height: 150px;
  padding: 10px;
}

.input.submit {
  background-color: #FFF;
  color: #f72f4e;
  font-size: 120%;
  height: 80px;
  box-shadow: 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.1s, -webkit-transform 0s 0.6s;
  transition: all 0.1s, transform 0s 0.6s;
  transition: all 0.1s, transform 0s 0.6s, -webkit-transform 0s 0.6s;
}

.input.submit:active {
  margin-top: 15px;
  box-shadow: 0 0 rgba(0, 0, 0, 0.5);
}

.input.form-error {
  -webkit-animation: error 0.8s ease;
  animation: error 0.8s ease;
  background: rgba(0, 0, 0, 0.7);
}

select option {
  background: #f72f4e;
  color: #FFF;
  border: none;
  box-shadow: none;
  outline: none;
}

select option:disabled {
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  font-size: 90%;
}

.input {
  transition: -webkit-transform 0s 1s;
  transition: transform 0s 1s;
  transition: transform 0s 1s, -webkit-transform 0s 1s;
}

.form-submitted .input {
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.5s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.form-submitted .input:nth-child(1) {
  transition-delay: 0.1s;
}

.form-submitted .input:nth-child(2) {
  transition-delay: 0.2s;
}

.form-submitted .input:nth-child(3) {
  transition-delay: 0.3s;
}

.form-submitted .input:nth-child(4) {
  transition-delay: 0.4s;
}

.form-submitted .input:nth-child(5) {
  transition-delay: 0.5s;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}

@media (max-width: 600px) {
  #form-container.expand {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: initial;
    overflow-x: hidden;
    bottom: 0;
  }
  h1 {
    font-size: 300%;
  }
  .icon:hover::before {
    -webkit-animation: none;
    animation: none;
  }
  .form-overlay {
    display: none;
    transition: none;
  }
}

@-webkit-keyframes error {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}

@keyframes error {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}

@-webkit-keyframes wiggle {
  0%,
  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

@keyframes wiggle {
  0%,
  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}
<html lang="en" class="gr__the-stone-quest_000webhostapp_com">

<head>
  <meta charset="UTF-8">
  <title>Expanding Contact Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="css/style.css">


</head>

<body data-gr-c-s-loaded="true" class="">

  <div class="form-overlay"></div>

  <div class="icon fa fa-pencil" id="form-container">
    <span class="icon fa fa-close" id="form-close"></span>
    <div id="form-content" class="">
      <div id="form-head">
        <h1 class="pre">Chapter 1</h1>
        <p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
      </div>
      <form>
        <label for="pswd"></label>
        <input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd">
        <input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
        <center>
          <p id="span" class="pre form-error"></p>
        </center>
      </form>
    </div>
  </div>
  <div class="icon fa fa-pencil" id="form-container">
    <span class="icon fa fa-close" id="form-close"></span>
    <div id="form-content" class="">
      <div id="form-head">
        <h1 class="pre">Chapter 1</h1>
        <p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
      </div>
      <form>
        <label for="pswd"></label>
        <input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd2">
        <input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
        <center>
          <p id="span" class="pre form-error"></p>
        </center>
      </form>
    </div>
  </div>
  <script type="text/javascript">
    function checkPswd() {
      var confirmPassword = "pus";
      var password = document.getElementById("pswd").value;
      if (password == confirmPassword) {
        window.location = "form.html";
      } else {
        document.getElementById("span").textContent = "Invalid Passcode";

      }
    }
  </script>
  <script src="js/jquery.min.js"></script>




  <script src="js/index.js"></script>





</body>

</html>

1 个答案:

答案 0 :(得分：2)

您未提供任何代码。我仍然去挖，看看。您的问题是您有两个具有相同ID的div。 

<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container">

我将第二个ID更改为id =“ form-container2”，然后将var formContainer更改为查看新ID，它按预期工作。

<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container2">

var formContainer = $('#form-container2');

因此，您的JS函数很困惑，因为您拥有1个以上具有相同ID的元素。

相关问题
最新问题