对同一页面上的多个 html 表单重复使用 JavaScript 脚本
Reuse JavaScript script for multiple html forms on same page
我有一个页面有多个表单,我需要在这些表单上使用相同的 JavaScript 代码。 JavaScript 代码向表单添加了更多输入字段。该脚本工作正常,但将输入字段添加到所有表单。我需要它只向正在填写的当前表单添加字段。到目前为止我还没有任何运气。
下面是其中一个表格的样子:
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
这是我的 JavaScript:
$(document).ready(function($){
$('.price-group .add-field').click(function(e){
e.preventDefault();
var n = $('.price-fields').length;
$('.price-group').append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
我设置了 jsfiddle:
JsFiddle Link
这对您有用,编辑代码更少
$(document).ready(function($){
$('.price-group').on('click', '.add-field', function(e){
e.preventDefault();
var n = $('.price-fields').length;
$(this.parentNode.parentNode).append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
您可以使用 jQuery closest
找到最接近 .price-fields
的已点击 <a>
标签:
$(document).ready(function($){
$('.price-group .add-field').click(function(e){
e.preventDefault();
var n = $('.price-fields').length;
$(this).closest('.price-group').append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
使用外部容器隔离实例。首先遍历容器...然后使用 find()
只查看该实例内部
$('.price-group .add-field').click(function(e) {
e.preventDefault();
var $container = $(this).closest('.price-group');
var n = $container.find('.price-fields').length;
$container.append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
为所需的输入字段或包含它的 div 提供一个 Id。
然后你可以这样做: $('some_id').on('click', '.some-class', function()
我有一个页面有多个表单,我需要在这些表单上使用相同的 JavaScript 代码。 JavaScript 代码向表单添加了更多输入字段。该脚本工作正常,但将输入字段添加到所有表单。我需要它只向正在填写的当前表单添加字段。到目前为止我还没有任何运气。
下面是其中一个表格的样子:
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
这是我的 JavaScript:
$(document).ready(function($){
$('.price-group .add-field').click(function(e){
e.preventDefault();
var n = $('.price-fields').length;
$('.price-group').append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
我设置了 jsfiddle: JsFiddle Link
这对您有用,编辑代码更少
$(document).ready(function($){
$('.price-group').on('click', '.add-field', function(e){
e.preventDefault();
var n = $('.price-fields').length;
$(this.parentNode.parentNode).append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
您可以使用 jQuery closest
找到最接近 .price-fields
的已点击 <a>
标签:
$(document).ready(function($){
$('.price-group .add-field').click(function(e){
e.preventDefault();
var n = $('.price-fields').length;
$(this).closest('.price-group').append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
$('.price-group').on('click', '.remove-field', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
<form>
<div class="price-group">
<div class="price-fields">
<label>Multiple <a class="add-field" href="#"> Add Field</a></label>
<br><input maxlength="7" type="text" name="prices[]" />
</div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>
使用外部容器隔离实例。首先遍历容器...然后使用 find()
只查看该实例内部
$('.price-group .add-field').click(function(e) {
e.preventDefault();
var $container = $(this).closest('.price-group');
var n = $container.find('.price-fields').length;
$container.append('<div class=" price-fields"><input maxlength="7" type="text" name="prices[]" /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
为所需的输入字段或包含它的 div 提供一个 Id。 然后你可以这样做: $('some_id').on('click', '.some-class', function()