Question

我是JQuery的新手。我正在玩一些JQuery，我访问了这个。我想做出这样的形式。我将所有代码复制到我的test.html中。这是我的代码。

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

此代码的结果是，按钮克隆不起作用，与单选按钮相同。我的问题是，如何将jsfiddle中的jquery代码复制到html表单中。提前致谢

Answer 1

下载JQuery或使用其CDN（与代码段中的CDN相同），然后将其放在head所有其他js文件上方（如果您有更多），在所有其他脚本

之前首先加载JQuery

最好是在body标记之后加入脚本，以便在脚本触发之前加载所有元素。

注意：我没有将代码段中的css和scripts分开，以便OP可以查看所需组件的放置位置

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

Answer 2

在头部包含jquery脚本

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 3

您可以从www.jquery.com/download/下载listening on [any] 1234... connect to [127.0.0.1] from localhost [1237.0.0.1] 53929文件，然后将其放在一个地方：

jquery.js

注意：您应该在脚本之前编写此代码！

如何将Jquery脚本添加到html中？

3 个答案: