Форум

SuperTester · #1 (**permalink**) 13.12.2015, 19:43

Добрый день. Имеется следующий код:

<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 выводил количество картинок внутри него?

С уважением, Вячеслав

рони · #2 (**permalink**) 13.12.2015, 19:52

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>

SuperTester · #3 (**permalink**) 13.12.2015, 20:00

Премного вам благодарен, выручили в который раз уже.

the_little · #4 (**permalink**) 02.10.2017, 11:41

Приветствую всех!

Попробовал такой же скрипт. Почему то не работает...

У меня такой вот код, там выводится 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; этой кнопке. Возможно есть и другой способ, придумал только это)

рони · #5 (**permalink**) 02.10.2017, 11:44

the_little,
можно без php, только готовый html

the_little · #6 (**permalink**) 02.10.2017, 11:48

<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 · #7 (**permalink**) 02.10.2017, 11:49

И таких блоков на странице несколько.

laimas · #8 (**permalink**) 02.10.2017, 12:09

the_little,
а зачем их вообще считать?

рони · #9 (**permalink**) 02.10.2017, 12:17

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>

рони · #10 (**permalink**) 02.10.2017, 12:18

Сообщение от laimas

а зачем их вообще считать?

чтоб не удалить последний, надо полагать

Форум

Справочник

Discord чат

Курсы javascript