0

以下示例是有效的并且可以正常工作，但是它太长并且经常重复相同的事情。（我必须这样做，因为我可能不会使用多重上传属性 - HTML5 -）。用户应该能够上传多个文件（最多 5 个）并且每次都通过一个新的输入文件元素。它们只应在必要时出现。

这是 HTML 部分：

<input type="file" id="image1" class="fileImage">
    <button class="cShow" id="show_i2">+1</button><br/>

<input type="file" id="image2" class="fileImage">
    <button class="cShow" id="show_i3">+1</button>
        <button class="cDel" id="del_i2">Delete</button><br/>

<input type="file" id="image3" class="fileImage">
    <button class="cShow" id="show_i4">+1</button>
        <button class="cDel" id="del_i3">Delete</button><br/>

<input type="file" id="image4" class="fileImage">
    <button class="cShow" id="show_i5">+1</button>
        <button class="cDel" id="del_i4">Delete</button><br/>

<input type="file" id="image5" class="fileImage">
    <button class="cDel" id="del_i5">Delete</button><br/>

这是 jQuery 部分：

$('#show_i2').click(function(event) {
    $('#image2, #show_i3, #del_i2').show();
    $('#show_i2').hide();
    event.preventDefault();
});

$('#show_i3').click(function(event) {
    $('#image3, #del_i3, #show_i4').show();
    $('#show_i3, #del_i2').hide();

    event.preventDefault();
});

$('#show_i4').click(function(event) {
    $('#image4, #del_i4, #show_i5').show();
    $('#show_i4, #del_i3').hide();

    event.preventDefault();
});

$('#show_i5').click(function(event) {
    $('#image5, #del_i5').show();
    $('#show_i5, #del_i4').hide();
    event.preventDefault();
});


$('#del_i2').click(function(event) {
    $('#image2, #del_i2, #show_i3').hide();
    $('#show_i2').show();
    event.preventDefault();

});

$('#del_i3').click(function(event) {
    $('#image3, #del_i3, #show_i4').hide();
    $('#show_i3, #del_i2').show();
    event.preventDefault();
});

$('#del_i4').click(function(event) {
    $('#image4, #del_i4, #show_i5').hide();
    $('#show_i4, #del_i3').show();
    event.preventDefault();
});

$('#del_i5').click(function(event) {
    $('#image5, #del_i5').hide();
    $('#show_i5, #del_i4').show();
    event.preventDefault();
});

我怎样才能缩短这个？

4

1 回答 1

2

你可以使用这样的东西：（用于展示部分）

$('[id^="show_i"]').click(function(event) {
    var index = $(this).attr(id).replace('show_i', '').parseInt();
    $('#image'+index+', #del_i'+index+', #show_i'+(index+1)).show();
    $('#show_i'+index+', #del_i'+(index-1)).hide();

    event.preventDefault();
});

我使用jQuerybegin with的选择器

将这个想法用于删除部分

$('[id^="del_i"]').click(function(event) {
    var index = $(this).attr(id).replace('del_i', '').parseInt();
    $('#image'+index+', #del_i'+index+', #show_i'+(index+1)).hide();
    $('#show_i'+index).show();
    event.preventDefault();

});
于 2013-10-24T11:58:54.900 回答