Работа с раскрывающимся списком

[laimas]

Насчет пофигизма... конечно же, мне не все равно, я обычно разбираюсь в вещах и делаю, как положено. Но случай с программированием - совсем другое - его нельзя освоить за день, неделю, месяц...

Понимание того, что это есть истина, а это есть ложь, и ценно нам первое из них, это не прерогатива языков программирования. Если вы пишите код надеясь получить результат, по вашему представлению, а получаете undefined, то это может быть следствием незнания Javascript. Но не действовать во вред себе, это вложенное в нас на генетическом уровне тогда, когда мы долбя по голове мамонта камнем, еще не знали, что деградируем и полную приключений жизнь сменим на уныло монотонное долбление клавиш.

На данный момент я просто не способен отличить самодеятельность от реализации (по крайней мере, когда я пытаюсь что-то писать сам) в виду отсутствия теоретических и практических знаний.

Значит ваши предки не охотились на мамонта, скорее ловили бабочек. Наверное ваша проблема в том, что вы не умеете абстрагироваться, зацикливаясь на конкретной А, а поэтому не подозреваете, что рядом есть и В, и С, ... Надо думать над задачей - это образное мышление. Представляя задачу понимать, что и на каких этапах ее решения предстоит делать - это логическое мышление. И только решению конкретного узла этой задачи, такого как разделить два на два в конкретном языке программирования, может помочь поиск в сети. Если же действовать в обратном направлении, то либо задача будут решена криво, либо вообще не решена.

Я не думаю, что вы напрочь лишены и образного, и логического мышления, и вам никогда не решить простую житейскую задачу. Ваш подъезд навещает разносчик пиццы предлагая ее от фирмы работающей под слоганом "Мы предугадываем ваши желания!".

1) Я не заказывал, а мне принесли, должен ли я быть осторожным?
2) Действительно ли в коробках пицца или все что угодно?
3) Если я возьму предложенное, должен ли я оплатить не проверяя что в коробках?

Решение этой задачи потребует от вас знаний Javascript? Нет конечно. Но ведь и в вашей задаче, которая из жизни переложена в виртуальность все тот же разносчик пиццы. В вашем случае разносчик пиццы - это Интернет. Коробки с пиццей - это форма. Понимая сущность реального "пицционера", прекрасно понимаем, что и виртуальный не обязательно ангел и его коробки всегда наполнены, и наполнены нужным для нас. А значит сценарий вашего приложения обязательно должен иметь условие - я принимаю пиццу (форму) только тогда, когда она в коробке. Разве до этого момента нужны знания конкретного языка программирования? Нет.

1) Предлагаем выбрать цвет и размеры. Надо ли вести расчет если что-то из этого не выбрано? Нет.
2) Надо ли помещать из предложенного в форму если не было расчетов? Нет.
3) Отправлять ли форму если поле заказа не заполнено? Нет.

Конкретизируя детально эти три постулата получаем еще вопросы, и находим на них ответы:

2а) Нужно очищать поле заказа формы перед помещением в него результатов выбора?
а) если не очищаем, придется разбираться в каждой строке заказа (которые уже есть в форме) - она действительна или же пользователь от этого набора отказался.
б) если очищаем, то поле всегда будет иметь только реальные на текущий момент записи заказа.

Значит выбираем б).

Даже и намека на какой либо оператор языка нет в этом. А вот как это сделать на каком либо языке, вот тут да, нужны уже его знания. Но ведь мы уже имеем конкретный план действий, а значит можем целенаправленно вести поиск нужного среди инструментов этого языка. Не имея стратегического плана, врага не победить.

Протестировать актуальность продукта важнее, чем сделать очень корректный сайт, потратив время, поняв, что он никому не нужен. Если есть посещаемость, то косяки можно отслеживать через вебвизор и допиливать что-то.

Это точка зрения дилетанта не понимающего, что такое веб приложение. Если вы оперируете локальным ПО, то только вам может доставлять неприятности червь поселившийся на вашем компьютере. Но если этот червь превращает ваш компьютер в бота, то это уже будет доставлять неприятности многим. Специфика веб приложения такова, что оно открыто для всех, это многопользовательское приложение со всеми вытекающими отсюда последствиями, а значит и обязательными требованиями.

Веб приложение, это системный блок на сервере, монитор и терминал на клиенте. Если ваше веб приложение, это запрос клиента -> ответ сервера "Привет мир!", то вопросов нет к серверному языку (сценарию) принимающему этот запрос. Но если терминал клиента не просто для ввода, но и для передачи данных от клиента, то это кардинально меняет ситуацию.

Ваше приложение не просто принимает данные от терминала клиента, а использует для передачи этих данных конечному потребителю очень больное и чувствительное для любого хоста - порт 25. Отдавая на откуп клиенту использование этого порта по любому поводу, вы нарушаете принципы безопасности.

Когда мы перестали убивать мамонтов и появился Интернет, он был в зачаточном состоянии. Тогда, только отвыкнув от мамонтов, мы воспринимали его как диковинку, и электронные письма в нем "Привет Мери! Приходи к пещере у Большого камня." могли быть лишь слегка дерзкими для юной Мери. Но с тех пор все изменилось, электронная почта теперь не так безобидна и она может быть не только спамом, но и оружием, и порт 25 не только как почтовое отделение, но и местом целенаправленных атак.

Разносчик пиццы всегда за дверью и он никуда не денется, всегда будет стоять за вашими дверями. И если в своей квартире вы отвечаете только за себя, то в квартире арендованной (хосте) вы несете ответственность и за ее мебель, и оборудование предоставленное вам в аренду.

[ФедорН]

Если мои предки ловили бабочек, от этого не были изгоями, были сытыми и счастливыми, не охотясь на мамонтов (или через раз-другой), то я в этом не вижу ничего плохого. Даже наоборот, т.к. их было меньшинствО, кто умел так существовать. Я склонен к оптимистичным сценариям

Мышление у Программистов отличается, бесспорно. Это только положительная сторона.

Да, столь глубоко я в задачу не погружался. Со светлой головой не пытался в нее вникнуть и разобрать. У вас это (я бы сказал, творческий процесс) происходит на автомате. Это ваше.

Но на уровне "если... то...", как мне кажется, я довольно хорошо понимаю задачи, если разбираю, но вот как дело доходит до языка...

Я до недавнего времени был перфекционистом, последнее время стараюсь уходить от этого. Еще год-полтора назад я бы не просто согласился с вашей точкой зрения по дилетантству, но и принял бы ее с большой вероятностью.
Но когда у человека нет знаний, чтобы сделать правильно, и возможности, чтобы тебе это сделал профессионал, то остается 2 варианта: сделать и попробовать, как можешь, или ничего не делать.
По-моему, второй вариант более страшен.

Очень много вещей в мире создается с дилетантским подходом, даже уже в изученных сферах. В каких-то случаях цена ошибки -даже жизнь. Поэтому, как уже говорил, это мнение верно с точки зрения конкретной специализации. Да и в любой сфере опытный специалист предостережет. В т.ч. на то и нужны знания и опыт
А ошибки- они неизбежны всегда и везде.

Флуд разводить не хочется, да и в такой дискуссии истина не родится

[ФедорН]

laimas, добрый день. посмею обратиться еще раз

При тестировании калькулятора обнаружились проблемы в ie 10, 11 и некоторых мобильных браузерах,а именно:

1. При изменении значение ползунка, не меняется значение output, value всегда остается начальным. В связи с этим, а также неудобством использования ползунка (точный поиск значения с шагом 1) на мобильных устройствах, хотелось бы реализовать рядом с ползунком iput text или number, который будет дублировать значение ползунка,а при вводе числа в input будет меняться значение ползунка, учитывая ограничения, и их автоматическая корректировка, max и min. Пересмотрел примеры, но везде это реализовано через ui, к которому прибегать не хотелось бы (оставив input range). Попытки "колхоза" результата не дали вообще никакого

2. При вводе значений, результат в поле input readonly не выводится.
Он может вывестись/измениться, только в том случае если вы установите курсор в это поле, нажмете клавишу на клавиатуре. В противном случае поле всегда статично. не подскажете, в чем причина?

3. не совсем вопрос по теме, но в некоторых случаях также не отображается "направляющая" ползунка, а только передвигающая часть (бегунок).
стилизовал с учетом кроссбраузерности, но так и не могу понять, в чем причина. возможно, скажете, где копать?

Чтобы не искать код, дублирую:

$(function() {
      $('button.addMore').click(function() {
        $('div.roword').first()
            .clone()
            .appendTo($('#form'))
            .find('select').val('')
            .end()
            .find('divinput')
            .val(function(i) {
                return i == 4 ? ''
                    : this.type == 'range' ? this.min
                    : $(this).prev().attr('min')
            })
            .end()
            .find('a').click(function() {
                $(this).closest('.roword').remove()
            })
            .show()
    })

    $('#form').on('input', 'select, input', function() {
        if(this.type == 'range') $(this).next().val(this.value)
        var o = $(this).closest('.roword').find('select,input'), //получить все элементы
            v = o.eq(0).val(), //значение списка
            w = o.eq(1).val(), //ширина
            h = o.eq(2).val(), //высота
            r = o.last().val(''); //вывод результата, очистить
        if(v) { //если в списке выбрано значение
            v = v * w * h;
            if(w * h <= 2399)  v *= 1.1
            else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
            else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
            else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
            r.val(v.toFixed(0))
        }
    })

});

var orderInfo = $.map($('.roword'), function(e) { //вставляет значения из калькулятора в форму заказа

	var o = $(e).find('select,input'); //получить все элементы



	if(o.eq(3).val()) return o.eq(0).children(':selected').text() + ' ' + o.eq(1).val() + 'x' + o.eq(2).val() + ' ' + o.eq(3).val() //если был выбор

});

if(orderInfo.length) $('textarea#orderItems').val(orderInfo.join('\n'))

<div id="form" >
       <div class="roword">
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
               <select  form="send" name="type[]">
                    <option value="">Выберите цвет</option>
                   <option value="1.1">Зеленый</option>
                   <option value="1.4">Синий</option>
                   <option value="1.75">Красный</option>
               </select>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
               <input  form="send" type="range" min="40" max="200" name="height[]" value="40">
              
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
               <input form="send" type="range" min="40" max="300" name="width[]" value="40"> <output>40</output>
           </div>
           <div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
               <input class="myPrice" form="send" type="text" name="result[]">
           </div>
           <div class="col-md-1 col-sm-1 col-xs-2 form-col-5">
                <a style="display:none" class="close"></a>
           </div>

       <div class="clearfix"></div>
       </div>
   </div>
   <div class="clearfix addbutton"></div>
   <button class="addMore">Добавить еще</button>

[laimas]

При тестировании калькулятора обнаружились проблемы в ie 10, 11 и некоторых мобильных браузерах

Не охота перечитывать все, но вроде бы упоминание было, что данный код подразумевает поддержку HTML5. А элементы типа number, range, output, это элементы доступные только в браузерах поддерживающих HTML5. Например полная поддержка типа number (кнопки) в FF появилась не так и давно, а по поводу "головной боли", календарей, разработчики вроде бы заявили, что поле типа date они и не собираются поддерживать. Печально, тем более когда в хроме реализован прекрасный и удобный календарь.

Так что если требуется поддержка старых браузеров, мобильных устройств различных, то от новшеств HTML5 придется отказаться. Для того чтобы иметь ползунок на всех устройствах и пишут свое, при этом не обязательно UI нужен, плагинов реализующих ползунок много, ищите в сети, читайте о поддержке его браузерами, выбирайте. А чтобы данный базовый код сделать рабочим под всеми устройствами, это уже тема не для рамок форума вопрос/ответ.

При вводе значений, результат в поле input readonly не выводится.

В каком браузере, да и где в коде поле с таким свойством? Я уже действительно не помню что писал, но в приведенном .find('divinput'), это что?

стилизовал с учетом кроссбраузерности, но так и не могу понять, в чем причина. возможно, скажете, где копать?

Скорее в этом и причина. Сперва определитесь с элементами, которые будут использованы, с плагином range если будет ползунок, а не ввод ручной, тогда и нынешние проблемы возможно уже не будут актуальны.

[ФедорН]

Понял, благодарю. Да, пожалуй, это я упустил момент с html5.
Тогда если можно, только прояснить момент с тем, что не работает автоматический расчет. Не работает в ie 10, ie 11.
И в firefox прежних версий стоимость не обновляется сразу, пока не сдвинешь бегунок. Т.е. вы выбрали все параметры, получили стоимость, потом меняете цвет на более дорогой, но если бегунок не трогали, то стоимость останется от более дешевого цвета, такой попадет в форму заказа.

В каком браузере, да и где в коде поле с таким свойством? Я уже действительно не помню что писал, но в приведенном .find('divinput'), это что?

Привожу код с вашими пояснениями:

$(function() {
    $('button').click(function() {
        $('div.roword').first() //получаем первый набор полей
                       .clone() //клонируем его
                       .appendTo($('#form')) //добавляем набор в форму
                       .find('select, output').val('') //сбрасываем значения полей
                       .end() //в начало набора
                       .find('input') //ищем поле ввода
                       .val(function() {
                            return this.min //устанавливаем значение равное минимальному  
                       })
                       .end() //в начало набора
                       .find('a').click(function() { //получаем кнопку удаления полей из формы
                            $(this).closest('.roword').remove() //удаляем добавленное из формы
                       })
                       .show() //делаем видимой кнопку удаления
    });
});

поле вывода результата

<input class="myPrice" form="send" type="text" name="result[]" readonly>

Правда, тогда может и логично, если ie не знаком с range, то он и не может считать результат - просто не поминает, что такое value из range.

[laimas]

Нет, IE11 поддерживает range, но событие input для всех нет. А вот элемент output IE не поддерживает. Можно заменить output на span, а обработчик расчета дополнить событием change, то есть вот так будут выглядеть его первые строки теперь:

$('#form').on('input change', 'select,input', function() {
        if(this.type == 'range') $(this).next().text(this.value)  //отобразить значение слайдера (теперь это span) 
        //код далее

Судя по этому class="col-md-3 col-sm-6 col-xs-12 form-col-1" используется бутсрап, это значит учитывается и мобильные устройства, а в нем есть все свое, включая и плагин range.

PS. О проблеме с readonly так и не понял.

[ФедорН]

Нет, IE11 поддерживает range, но событие input для всех нет. А вот элемент output IE не поддерживает. Можно заменить output на span, а обработчик расчета дополнить событием change, то есть вот так будут выглядеть его первые строки теперь:

Событием change дополнил и как раз разрешилась проблема с input readonly, которая:

PS. О проблеме с readonly так и не понял.

Результат вычисления стал динамически изменяться.

А вот ситуацию с output, который выводит значение input range это не изменило, даже наоборот.

Я добавил change, заменил <output>40</output> на <span>40</span>, даже в последней версии chrome данное значение перестало работать - всегда (при изменении положения ползунка) отображается минимальный value, т.е. 40.

[laimas]

даже в последней версии chrome данное значение перестало работать

Что-то делается не так, вот все, работает и в хроме, и ослике:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {

    $('button').click(function() {
        $('div.roword').first()
                       .clone()
                       .appendTo($('#form'))
                       .find('select').val('')
                       .end()
                       .find('input, output')
                       .val(function(i) {
                            return i == 4 ? '' : this.type == 'range' ? this.min : $(this).prev().attr('min')  
                       })
                       .end()
                       .find('a').click(function() {
                            $(this).closest('.roword').remove()
                       })
                       .show()
    })
    
    //обработка изменения слайдера и выбора в списке
    $('#form').on('input change', 'select,input', function() {
        if(this.type == 'range') $(this).next().text(this.value)  //отобразить значение слайдера    
        //рассчет
        var o = $(this).closest('.roword').find('select,input'),
            v = o.eq(0).val(),
            w = o.eq(1).val(),
            h = o.eq(2).val(),
            r = o.last().val('');
            if(v) { 
                v = v * w * h;
                if(w * h <= 2399)  v *= 1.1
                else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
                else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
                else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
                r.val(v.toFixed())
            }
    })

});
</script> 
</head>
<body>

<div id="form" >
    <div class="roword">
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
            <select  form="send" name="color[]">
                <option value="">Выберите цвет</option>
                <option value="1.2">Зеленый</option>
                <option value="1.6">Синий</option>
                <option value="1.8">Красный</option>
            </select>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
            <input form="send" type="range" min="40" max="300" name="width[]" value="40"><span>40</span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
            <input form="send" type="range" min="40" max="200" name="height[]" value="40"><span>40</span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
            <input class="myPrice" form="send" type="text" name="result[]" readonly> <a style="display:none">Удалить</a>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<button>Добавить</button>

</body>
</html>

[laimas]

ФедорН,
забыл, в расчетах под span изменил, а в клонировании нет, должно быть так:

$('button').click(function() {
        $('div.roword').first()
                       .clone()
                       .appendTo($('#form'))
                       .find('select,[type=text]').val('')
                       .end()
                       .find('input')
                       .val(function() {
                            return this.min  
                       })
                       .end()
                       .find('span').text(function() {
                            return $(this).prev()[0].min
                       })
                       .end()
                       .find('a').click(function() {
                            $(this).closest('.roword').remove()
                       })
                       .show()
    });

[ФедорН]

laimas, действительно, это у меня была ошибка в коде скрипта.
Все работает. Спасибо.

Можно еще вопрос.
Каждой строке списка товаров в форме заказа хотелось бы в начале присвоить номер.

var orderInfo = $.map($('.roword'), function(e) { //вставляет значения из калькулятора в форму заказа
		
var i = $(".roword"),
u = +i.val();
	
var o = $(e).find('select,input'); //получить все элементы

	if(o.eq(3).val()) return  u+'.' + ' ' + o.eq(0).children(':selected').text() + ' ' + o.eq(1).val() + 'x' + o.eq(2).val() + ' ' + o.eq(3).val() //если был выбор

});

if(orderInfo.length) $('textarea#orderItems').val(orderInfo.join('\n'))

Насколько удалось накопать, самый понятный вариант - когда мы присваиваем номер каждому div .roword.
Добавилvar i = $(".roword"),
u = +i.val(); и возврат значения u в строке
, но нумерация строк начинается с нуля, при попытке добавить счетчик или начать с .val(+1) получаю NaN. Почему значение получается не числовое? Как понимаю, вначале я привожу как раз u к числовому значению.