Chcę zrobić prosty formularz wejściowy + przycisku, który po przesłaniu należy wymienić innym div podczas pobytu na tej samej stronie. Zastosowałem JQuery's .Hide ("powolny") na formularzu i.

Co ja robię źle??

Przykład na żywo: https://codepen.io/mcancode/pen/vykxmbr

Kod:

  <!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
#subscribed > div > p {
  display: none;
}
</style>

</head>
<body>
 
  <main>
    <section id="newsletter">
      <div id="unsubscribed">
        <h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
        <form id="newsletter-form">
          <div>
            <input type="email" placeholder="Enter your email">
            <button type="submit">
              Submit
            </button>
          </div>  
        </form>
      </div>
      <div id="subscribed">
        <div>
          <p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
        </div>
      </div>
    </section>
    <!-----------------END OF NEWSLETTER---------->

  </main>

  <!--JS files...-->
  <!-- jQuery and JS bundle w/ Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script>
  
$(() => {

  //check when newsletter form submitted
  $("#newsletter-form").submit((event)=> {
    event.preventDefault();
    $("#unsubscribed").hide("slow");
    $("#subscribed>div>p").show("slow");
  })
});
  </script>
</body>
</html>
0
Mihail Marian 20 październik 2020, 18:58

1 odpowiedź

Najlepsza odpowiedź

Tylko kilka rzeczy.

  1. Aby ukryć element wewnętrzny, aby ukryć się - nie możesz kierować elementem opakowania ("Newsletter") Ukryj go, a następnie pokazać jedną z jej dzieci. Będziesz chciał skierować - "wypisany".

  2. Daj innym obszarze, który chcesz zniknąć, aby zobaczyć styl początkowy, aby go ukryć ("subskrybowany") Style = "Wyświetlacz: Brak"

  3. Wygląda na to, że wersja JQUERY jesteś odwołania, nie obejmuje tej animacji - przywołuję się zaktualizowaną wersją jQuery po oryginalnym odniesieniu (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js)

<!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
</style>

</head>
<body>
 
  <main>
    <section id="newsletter">
      <div id="unsubscribed">
        <h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
        <form id="newsletter-form">
          <div>
            <input value="sample@email.com" type="email" placeholder="Enter your email">
            <button type="submit">
              Submit
            </button>
          </div>  
        </form>
      </div>
      <div id="subscribed" style="display:none;">
        <div>
          <p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
        </div>
      </div>
    </section>
    <!-----------------END OF NEWSLETTER---------->

  </main>

  <!--JS files...-->
  <!-- jQuery and JS bundle w/ Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  
$(() => {

  //check when newsletter form submitted
  $("#newsletter-form").submit((event)=> {
    event.preventDefault();
    $("#unsubscribed").hide("slow");
    $("#subscribed").show("slow");
  })
});
  </script>
</body>
</html>
1
Kyle 20 październik 2020, 16:20