我正在尝试创建上传表单。到目前为止它运行良好,我正在尝试解决一些我不喜欢的错误。
我似乎遇到问题的线路是
$(element).find(">:first-child").attr("value", "");
克隆表单时,它会克隆 div 并用任何内容替换值,留下空白表单,这效果很好,如果我要删除该行,我将获得前一个表单的值,所以对于空白来说会很好要显示的表单。
我遇到的问题是,当您删除表单时,所有表单值都会删除,我想要的是当您删除表单时,保留其他表单的值。
这是一个 fiddle http://jsfiddle.net/d77pd/1/或查看下面的代码
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
<input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
JavaScript
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if ($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function (e) {
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input);
});
$(document).on("click", ".remove", function (e) {
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each(function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
克隆表单几次,如果您删除第一个表单及其内容之外的任何表单,您会注意到第一个表单的内容被删除,我希望将其保留。
最佳答案
第一种方法:
在调用 updateClonedInput(cloneIndex, new_Input);
后调用 $(element).find(">:first-child").attr("value", "");
来自添加功能。
<强> Working Demo First approach:
第二种方法:
我修改了一些代码。在函数 updateClonedInput
中再传递一个 bool 参数。添加时该参数将设置为 true,删除 dom 时该参数将设置为 false。这将防止该值在删除函数中被替换:
function updateClonedInput(index, element,param) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
if(param)
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input,true);
});
$(document).on("click", ".remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement,false);
})
});
关于javascript - 克隆表单输入并清除值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22094462/