Следующий пример действителен и работает правильно, но он слишком длинный, и одни и те же вещи повторяются часто. (Я должен сделать это на этом пути, потому что я не могу использовать атрибут множественной загрузки - HTML5 -). Пользователь должен иметь возможность загружать несколько файлов (до 5) и каждый раз с помощью нового элемента input-file. При необходимости они должны обращаться, если это необходимо.
Это 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-Part:
$('#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();
});
Как я могу сократить это?
Вы можете использовать что-то вроде этого: (для части шоу)
$('[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();
});
Я использую begin with
селектором jQuery
Используйте эту идею для части удаления
$('[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();
});