Настройте текст с полями ввода

Question

Настройте текст с полями ввода

1

Кто-нибудь знает, как я собирался исправить дубликаты при нажатии на флажки?

<label><input type="checkbox" data-bValue="100" data-sValue="sV1" data-nValue="nV1" name="layers"> 100</label><label><input type="checkbox" data-bValue="200" data-sValue="sV2" data-nValue="nV2" name="layers"> 200</label><label><input type="checkbox" data-bValue="300" data-sValue="sV3" data-nValue="nV3" name="layers"> 300</label><label><input type="checkbox" data-bValue="400" data-sValue="sV4" data-nValue="nV4" name="layers"> 400</label><label><input type="checkbox" data-bValue="500" data-sValue="sV5" data-nValue="nV5" name="layers"> 500</label><label><input type="checkbox" data-bValue="600" data-sValue="sV6" data-nValue="nV6" name="layers"> 600</label><label><input type="checkbox" data-bValue="700" data-sValue="sV7" data-nValue="nV7" name="layers"> 700</label><h1 id="render"></h1>

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

Скрипт: https://jsfiddle.net/swedoc/Lwr16wrt/

    $(document).ready(function() {

    var scents = [];
    var notes = [];
    var theRender = document.getElementById("render"); 

    $("input[name='layers']").on('click', function(){ 

                $.each($("input[name='layers']:checked"), function(){            
                    scents.push($(this).attr("data-sValue"));
                });        

                $.each($("input[name='layers']:checked"), function(){            
                    notes.push($(this).attr("data-nValue"));
                });

                    theRender.innerHTML 
                    += "Youve created a<br>" 
                    + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
                    + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";                        
    });
});

swedoc 01 авг. 2017, в 16:15

Источник

0

Извините, я не понимаю, что вы пытаетесь сделать. Я проверил тебя на скрипке. И их больше, чем одна тревожная вещь. Так что именно вы видите в качестве проблемы?
JBO 01 авг. 2017, в 15:14
0

Извини, моя ошибка. Если вы отметите флажки, он сохраняет добавленные значения, но не удаляет предыдущие. Таким образом, он просто складывает значения снова и снова. Я хочу обновить текст из "theRender.innerHTML"
swedoc 02 авг. 2017, в 09:20
0

@JBO Спасибо за ответы, но я думаю, что решил это, добавив theRender.innerHTML = ''; внутрь $ ("input [name = 'layer']"), и, похоже, теперь это работает :) Я думаю, что просто нужна ссылка на значение по умолчанию
swedoc 02 авг. 2017, в 11:50

Показать ещё 1 комментарий

Теги:

javascript

arrays

input-field

1 ответ

Ещё вопросы

Извините, я не понимаю, что вы пытаетесь сделать. Я проверил тебя на скрипке. И их больше, чем одна тревожная вещь. Так что именно вы видите в качестве проблемы?
Извини, моя ошибка. Если вы отметите флажки, он сохраняет добавленные значения, но не удаляет предыдущие. Таким образом, он просто складывает значения снова и снова. Я хочу обновить текст из "theRender.innerHTML"
@JBO Спасибо за ответы, но я думаю, что решил это, добавив theRender.innerHTML = ''; внутрь $ ("input [name = 'layer']"), и, похоже, теперь это работает :) Я думаю, что просто нужна ссылка на значение по умолчанию

JBO · Accepted Answer · 2017-08-02T06-48-00.000Z

Ответ заключается в области переменных. Вам нужно объявить свои массивы внутри вашей функции, а не снаружи.

Также удалите "+" из вашего innerHTML +=.

$("input[name='layers']").on('click', function(){ 
    var scents = [];
    var notes = []; 

    $.each($("input[name='layers']:checked"), function(){            
        scents.push($(this).attr("data-sValue"));
    });        

    $.each($("input[name='layers']:checked"), function(){            
        notes.push($(this).attr("data-nValue"));
    });

    theRender.innerHTML = "Youve created a<br>" 
      + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
      + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";                        
});

Вот ваш fiddleJs исправлено: https://jsfiddle.net/Lwr16wrt/23/