Подсчет количества элементов в блоке
Добрый день. Имеется следующий код:
<div class="single-room"> <img src=""> <img src=""> <span class="count"></span> </div> <div class="single-room"> <img src=""> <img src=""> <img src=""> <span class="count"></span> </div> и скрипт, который считает количество картинок и выводит их в count:
$(document).ready(function(){
$(".count").html($(".gallery img").length);
});
Проблема в том, что скрипт выводит общее количество картинок в документе. Подскажите, что нужно добавить, чтобы он для каждого блока single-room выводил количество картинок внутри него? С уважением, Вячеслав |
SuperTester,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(".single-room").each(function(indx, el){
$(".count",el).text($('img',el).length)
});
});
</script>
</head>
<body>
<div class="single-room">
<img src="">
<img src="">
<span class="count"></span>
</div>
<div class="single-room">
<img src="">
<img src="">
<img src="">
<span class="count"></span>
</div>
</body>
</html>
|
Премного вам благодарен, выручили в который раз уже.
|
Приветствую всех!
Попробовал такой же скрипт. Почему то не работает... У меня такой вот код, там выводится input, кнопка добавить поле, кнопка удалить поле.
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<?php
$array = '';
$values = explode("|",$array);
$n = 0;
foreach ($values as $value) {
$n++;
if ($n == 1) {
?>
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<?php
} else {
?>
<div id="add<?=$n?>" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs<?=$n?>" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<?php
}
}
?>
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
и скрипт
<script>
$(function(){
$("#add_field_area").each(function(indx, el){
$(".count",el).text($('.add',el).length)
});
});
</script>
в .count - пусто. Собственно делаю это для чего. Сейчас у меня кнопка "Удалить поле" видна постоянно. А я хочу, чтобы она появлялась только когда есть 2 инпута и более. Вот и думал подсчитать количество инпутов. Вывести в переменную. и потом присвоить display:none; этой кнопке. Возможно есть и другой способ, придумал только это) |
the_little,
можно без php, только готовый html |
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<div id="add2" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs2" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<!-- пробовал сюда вставить <span class="count"></span>, посчитал, вывел 1, но если нажать на кнопку добавить поле, то значение не меняется. Так и остается 1-->
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
|
И таких блоков на странице несколько.
|
the_little,
а зачем их вообще считать? |
the_little,
id лучше убрать, достаточно классов
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".step2-blocks").each(function(indx, el) {
var add = $(".add", el),
num = add.length,
item = add.eq(0).clone(),
del = $(".delbutton", el),
n = 1;
function show() {
del.toggle(num > n)
}
show();
$(".addbutton", el).on("click", function() {
var block = item.clone().insertAfter($(".add:last", el));
$(".inputfile", block).attr({
"name": "ustav-docs" + ++num
});
show()
});
del.on("click", function() {
$(".add:last", el).remove();
num--;
show()
})
})
});
</script>
</head>
<body>
<div class="step2-blocks">
<div class="input-file-name">Уставные документы</div>
<div id="add_field_area">
<div id="add1" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<div id="add2" class="add">
<div class="input_file_hold">
<label class="input_file_label btn btn_upload_file">
<input type="file" name="ustav-docs2" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
<div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
</label>
</div>
</div>
<!-- пробовал сюда вставить <span class="count"></span>, посчитал, вывел 1, но если нажать на кнопку добавить поле, то значение не меняется. Так и остается 1-->
</div>
<div class="addfield">
<div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
<input type="hidden" name="values" id="values" value="<?=$array?>"/>
<div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>
<span class="count"></span>
</div>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
Во-первых это name="ustav-docs1", name="ustav-docs2" уже плохо для сервера, ибо такие имена обрабатывать, это костыль. А удалять удобнее "любой из", а не только последний добавленный. |
laimas,
согласен. |
Цитата:
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки// [добавить поле][удалить поле] Если поля добавлены, то выглядит это так ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки// ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки// ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки// ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки// [добавить поле][удалить поле] Соответсвенно здесь предусмотрено именно удаление последнего поля. |
Цитата:
|
Цитата:
У вас список файлов и для них вам так нужна строгая последовательность от 1 до N? Какая разница как они будут загружены в последовательности если это всего лишь список документов. А значит ваша нумерация всего лишь усложнение кода на клиенте и на сервере, более она ничего не дает. Список, это name="file[]", и на клиенте не требуется счетчика, а просто клонирование элемента, с очисткой его значения. И север получить под ключом file массив файлов. А пользователю же в случае одной кнопки удаления, удаляющей последнее, выбранный ошибочно файл, который он заметит только после последующего выбора, удалить не получится. Это по вашему удобно? Собственно дизайн не есть Закон, с адекватным заказчиком можно всегда договориться если он понимает, что заложенное страдает неудобством. |
Цитата:
|
Можно из этого скрипта убрать функционал кнопки ДОБАВИТЬ ПОЛЕ.
Он прописан в другом скрипте, поэтому скорее всего 2 и добавляются |
Там такой скрипт используется
<script>
$('.input_file_hold').each(function () {
var hold = $(this);
var file = hold.find('.inputfile');
var text = hold.find('.input_file_add');
file.on("change", function (inpfil) {
var files = file[0].files;
$(this).parent().parent().addClass('file_selected');
if (files.length > 1) {
text.text("Файлов добавлено: " + files.length);
text.prepend('<img src="./images/screpka_green.png" alt="">');
text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
var close = text.parent().parent().find('.button_close');
close.on("click", function (inpfilclose) {
file.val('');
text.text('Выбрать файл');
text.prepend('<img src="./images/screpka_red.png" alt="">');
$(this).parent().removeClass('file_selected');
$(this).remove('.button_close');
});
}
else {
var filename = inpfil.target.value.split("\\").pop();
text.text(filename);
text.prepend('<img src="./images/screpka_green.png" alt="">');
text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
var close = text.parent().parent().find('.button_close');
close.on("click", function (inpfilclose) {
file.val('');
text.text('Выбрать файл');
text.prepend('<img src="./images/screpka_red.png" alt="">');
$(this).parent().removeClass('file_selected');
$(this).remove('.button_close');
});
}
});
});
</script>
И еще такой
<script type="text/javascript">
function addField () {
var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1;
$('div#add_field_area').append('<div id="add'+telnum+'" class="add"><div class="input_file_hold"><label class="input_file_label btn btn_upload_file"><input type="file" name="ustav-docs'+telnum+'" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/><div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div></label></div></div>');
var file = $('#add'+telnum).find('.inputfile');
var text = $('#add'+telnum).find('.input_file_add');
file.on("change", function (inpfil) {
var files = file[0].files;
$(this).parent().parent().addClass('file_selected');
if (files.length > 1) {
text.text("Файлов добавлено: " + files.length);
text.prepend('<img src="./images/screpka_green.png" alt="">');
text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
var close = text.parent().parent().find('.button_close');
close.on("click", function (inpfilclose) {
file.val('');
text.text('Выбрать файл');
text.prepend('<img src="./images/screpka_red.png" alt="">');
$(this).parent().removeClass('file_selected');
$(this).remove('.button_close');
});
} else {
var filename = inpfil.target.value.split("\\").pop();
text.text(filename);
text.prepend('<img src="./images/screpka_green.png" alt="">');
text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
var close = text.parent().parent().find('.button_close');
close.on("click", function (inpfilclose) {
file.val('');
text.text('Выбрать файл');
text.prepend('<img src="./images/screpka_red.png" alt="">');
$(this).parent().removeClass('file_selected');
$(this).remove('.button_close');
});
}
});
}
function deleteField (id) {
$('div#add'+id).remove();
writeFieldsVlues();
}
function deleteLastField () {
var id = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3));
if(id > 1){
$('div#add'+id).remove();
}
writeFieldsVlues();
}
function writeFieldsVlues () {
var str = [];
var tel = '';
for(var i = 0; i<$("input#ustav-docs").length; i++) {
tel = $($("input#ustav-docs")[i]).val();
if (tel !== '') {
str.push($($("input#ustav-docs")[i]).val());
}
}
$("input#values").val(str.join("|"));
}
</script>
|
Вообще конечно жесть получается. У меня 4 инпута разных.
ustav-docs buh-docs nalog-docs garant-docs Получается все эти скрипты нужно 4 раза повторить)) |
Цитата:
Цитата:
Цитата:
|
the_little,
если все четыре блока имеют класс step2-blocks, то это код повторять не надо
$(function() {
$(".step2-blocks").each(function(indx, el) {
var add = $(".add", el),
num = add.length;
del = $(".delbutton", el),
n = 1;
function show() {
del.toggle(num > n)
}
show();
$(".addbutton", el).on("click", function() {
++num
show()
});
del.on("click", function() {
num--;
show()
})
})
});
|
Цитата:
|
Цитата:
ustav-docs1 ustav-docs<?=$n?> заменив на []. Но не понятен смысл клонирования/добавления как таковое да еще четырежды, так как поля определены как multiple="multiple". Одним полем можно уже выбрать сколь угодно, зачем же иметь таких полей множество? Вам уже надо беспокоится о том, чтобы выбор пользователя не выходил за рамки макс. разрешенного размера POST данных с учетом макс. разрешенного для загрузки размера файла. Плюс новые версии РНР имеют ограничения и на макс. разрешенное количество файлов для загрузки, которое по умолчанию равно 20. Цитата:
|
Цитата:
|
Цитата:
Вне зависимости от количества полей кнопка не появляется. В html присутствует. |
the_little,
значит у вас иной html |
the_little,
сократил, до миниммума смотрите что в консоли
$(function() {
$(".step2-blocks").each(function(indx, el) {
var del = $(".delbutton", el); console.log($(".add", el).length);
function show() {
del.toggle($(".add", el).length > 1)
}
show();
$(".addbutton", el).on("click", show);
del.on("click", show)
})
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 20:36. |