сделать различие между объектами, созданными с помощью clone () в скрипте java - PullRequest
Новая
       27

сделать различие между объектами, созданными с помощью clone () в скрипте java

0 голосов
/ 26 января 2020

Добрый день друзья. У меня проблема ... Спасибо, если вы мне поможете, у меня есть пара входов в div. Я скопировал этот div с помощью функции Clone в скрипте java (нажав кнопку), и сейчас у меня есть два div. но моя проблема:

1- я не знаю, как я могу правильно получить значения входов (имена входов одинаковы)?

2- и у меня есть выбор входа в div, что некоторые входы добавить или удалить, выбрав каждый вариант выбора ввода. Теперь, после копирования div, выберите один из вариантов в div2, создайте изменения в div1 ... и я этого не хочу !! 

<div class="levels">
    <div class="add_senario_level">
        <span>Level 1</span>
        <form>
            <select name="condition" onchange="show_div(this,'shop during');">
                <option selected="selected" disabled="disabled">choose condition</option>
                <option>shop after registration</option>
                <option>shop during</option>
            </select>
            <div id="shop_during" style="display:none;">
                <input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
                <select id="shop_during_time" name="shop_during_time">
                    <option selected="selected">hour after registeration</option>
                    <option>day after registeration</option>
                    <option>week after registeration</option>
                    <option>month after registeration</option>
                </select>
            </div>
            <div>
                <button type="button" class="newLevel"> Add New Level </button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function()
    {
        $(".newLevel").click(function()
        {
            $(".add_senario_level").clone().appendTo(".levels");
        });
    });

    function show_div(obj, id)
    {
        txt = obj.options[obj.selectedIndex].text;
        if (txt.match(id))
        {
            document.getElementById("shop_during").style.display = 'block';
        }
        else
        {
            document.getElementById("shop_during").style.display = 'none';
        }
    }
</script>

1 Ответ

0 голосов
/ 28 января 2020

Вы можете использовать функцию поиска jQuery для поиска дочернего элемента и функцию attr для получения и установки значений атрибутов. Вы захотите сделать это, чтобы изменить атрибуты id и name для ввода и выбрать, как показано ниже:

HTML

<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">

JavaScript

$(".newLevel").click(function()
{
    const count = $('.add_senario_level').length;
    const clone = $(`#add_senario_level${count - 1}`).clone();
    const input = clone.find(`#shop_during_num${count - 1}`);
    const select = clone.find(`#shop_during_time${count - 1}`);

    input.attr('name', `shop_during_num${count}`);
    input.attr('id', `shop_during_num${count}`);
    select.attr('name', `shop_during_time${count}`);
    select.attr('id', `shop_during_time${count}`);
    clone.appendTo(".levels");
});

В методе show_div вы можете использовать $(obj) для ссылки на выборку, вызвавшую функцию, и показать или скрыть правильный элемент с помощью 

$(obj).parent().find('#shop_during').css('display', 'block');
...