Wie fügen Sie die Jquery-Skript in html?

Ich bin neu in JQuery. Ich spielte mit einigen JQuery, besuchte ich diese
jsfiddle . Ich will genau die form wie diese.
Ich kopieren den code in meine test.html. Hier ist mein code.

<html>
<head>
<title>
    TEST
</title>

<script>

$(".container").on("change", ".a2 input[name^='selection_']", function 
(event) {
if ($(this).val() == "name") {
    $(this).parent().find('.url').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.text').css({
        'visibility': 'visible',
            'display': 'block'
    });
  } else {
    $(this).parent().find('.text').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.url').css({
        'visibility': 'visible',
            'display': 'block'
    });
    }
  });

$('.clone').click(function () {
var p = $('.a2').length;
var cloned = $('.a2:first').clone()
    .find('input:radio').attr('name', 'selection_' + ++p).end()
    .appendTo('.container');
});
</script>

<style>
.a2 .url {
visibility:hidden;
display:none;
 }
</style>

</head>
<body>
<div class="container">
<div class="a2">
    <input type="radio" name="selection_1" value="name" checked="checked"
    />Name
    <input type="radio" name="selection_1" value="url" />URL
    <div class="text">
        <textarea name="name[]">Enter name:</textarea>
    </div>
    <div class="url">
        <textarea name="url[]">http://</textarea>
    </div>
</div>
</div>
<input type="button" class="clone" value="Clone" />





</body>
</html>

Das Ergebnis dieses Codes ist, die Schaltfläche clone nicht funktioniert, das gleiche mit der radio-Taste. Meine Frage ist, wie Sie die jquery-code in jsfiddle in html-form. Vielen Dank im Voraus

  • gehören die jquery-Skript im html-stellen Sie sicher, laden Sie die jquery-Skript, bevor alle Sie code
  • Sie haben nicht die enthalten die wichtigsten jQuery-Skript in Ihrem code. Hinzufügen, dass in Ihren html-Kopf und dein code sollte funktionieren
  • wie es ? ich habe auch diese <script src=“code.jquery.com/jquery-1.7.2.min.js“></script> aber immer noch nicht funktioniert
  • setzen Sie Ihren code direkt vor den </body> oder Ihre js, innen-Dokument .bereit
  • a) zählen jquery, b) wickeln Sie Ihren code in $(function() { ... your code ... }); sodass Ihr code wartet, bis das DOM fertig zu sein, bevor Sie Zugriff auf DOM
  • Danke vielmals, es funktioniert Prima. sorry für mein sinnlos-post. 🙂 Ich bin immer noch neu in Jquery.

InformationsquelleAutor Azim Azman | 2017-06-16



3 Replies
  1. 3

    Download JQuery oder verwenden Sie die CDN (die gleichen, wie in der snippet), dann legte es in die head vor allen anderen js – Dateien (wenn Sie mehr haben), so dass JQuery wird zuerst geladen werden, bevor alle anderen Skripte

    Wäre es besser, wenn Sie das script nach der body tag, so dass alle Elemente geladen wurden, bevor die Skripte Feuer.

    Hinweis: ich nicht trennen css und scripts im snippet so, dass die OP sehen können, wo die benötigten Komponenten

    HTML:

    <html>
    
    <head>
      <title>
        TEST
      </title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style>
        .a2 .url {
          visibility: hidden;
          display: none;
        }
      </style>
    
    </head>
    
    <body>
      <div class="container">
        <div class="a2">
          <input type="radio" name="selection_1" value="name" checked="checked" />Name
          <input type="radio" name="selection_1" value="url" />URL
          <div class="text">
            <textarea name="name[]">Enter name:</textarea>
          </div>
          <div class="url">
            <textarea name="url[]">http://</textarea>
          </div>
        </div>
      </div>
      <input type="button" class="clone" value="Clone" />
    </body>
    <script>
      $(".container").on("change", ".a2 input[name^='selection_']", function(event) {
        if ($(this).val() == "name") {
          $(this).parent().find('.url').css({
            'visibility': 'hidden',
            'display': 'none'
          });
          $(this).parent().find('.text').css({
            'visibility': 'visible',
            'display': 'block'
          });
        } else {
          $(this).parent().find('.text').css({
            'visibility': 'hidden',
            'display': 'none'
          });
          $(this).parent().find('.url').css({
            'visibility': 'visible',
            'display': 'block'
          });
        }
      });
    
      $('.clone').click(function() {
        var p = $('.a2').length;
        var cloned = $('.a2:first').clone()
          .find('input:radio').attr('name', 'selection_' + ++p).end()
          .appendTo('.container');
      });
    </script>
    
    </html>

    • Danke vielmals, es funktioniert Prima. sorry für mein sinnlos-post. 🙂 Ich bin immer noch neu in Jquery.
  2. 0

    Gehören die jquery-Skript auf Ihrem Kopf Abschnitt

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    • Danke vielmals, es funktioniert Prima. sorry für mein sinnlos-post. 🙂 Ich bin immer noch neu in Jquery.
  3. 0

    Können Sie herunterladen jquery.js Datei aus http://www.jquery.com/download/ dann in der Ort :

    <script type="text/javascript" src="path of your jquery.js file + your jquery file name "  ><script>

    Hinweis : notieren Sie sich diesen code, bevor Sie Ihre Skripts !

    • Warum sind Sie den Umschlag mit single-quote?
    • ich reparierte es .Nein, es ist wahr.tnx über reaport mein Fehler 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.