Блог

Главная - Вопросы по программированию - Копирование одного поля ввода в группу других полей ввода в jQuery

Копирование одного поля ввода в группу других полей ввода в jQuery

#jquery #input

#jquery #ввод

Вопрос:

Привет, у меня есть следующий код (я удалил часть наворотов, но все необходимое есть здесь.

 <div class="item">
<div class="img_url"><input type="text" value="/siteimg/Designs/special-request.jpg" id="DT_Image_1" name="DT_Image_1" /></div>
<div id="copy_to_all_1"><a href="#">Copy to all</a></div>
</div>

<div class="item">
<div class="img_url"><input type="text" value="" id="DT_Image_2" name="DT_Image_2" /></div>
<div id="copy_to_all_2"><a href="#">Copy to all</a></div>
</div>

<div class="item">
<div class="img_url"><input type="text" value="" id="DT_Image_3" name="DT_Image_3" /></div>
<div id="copy_to_all_3"><a href="#">Copy to all</a></div>
</div>

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

Итак, в этом случае, если бы я нажал на ссылку «Копировать во все» в первом элементе, другие поля ввода были бы заполнены «/siteimg/Designs/special-request.jpg »

Мне нужно немного магии jQuery, чтобы все было готово к работе.

Комментарии:

1. Итак, вы хотите, чтобы мы написали это для вас? Вы пробовали что-нибудь, чтобы заставить это работать?

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

Ответ №1:

 $(document).ready(function(){
    $('div[id^="copy_to_all"] a').live('click', function(){
        $('.img_url input').val($(this).closest('div.item').find('.img_url input').val())
    });
});

PS: Ваша разметка отстой. Должно быть так:

 <div class="item">
    <input class="img_url" type="text" value="/siteimg/Designs/special-request.jpg" id="DT_Image_1" name="DT_Image_1" />
    <a class="copy_to_all" href="#">Copy to all</a>
</div>

И соответствующая функция сверху:

 $(document).ready(function(){
    $('a.copy_to_all').live('click', function(){
        $('.img_url').val($(this).prev('.img_url').val())
    });
});

Редактировать: увидел

дивы загружаются динамически

часть вопроса изменена click() на live() просто на всякий случай.

Редактирование 2: бонусные рабочие скрипки с оригиналом и с приличной разметкой.

Комментарии:

1. Да, честно говоря, кодирование намного хуже, чем я даже вставил, ха-ха, оно окружено множеством таблиц. Я просто сократил его, чтобы попытаться донести суть. Мне просто не хватало функции .closest 🙁

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

Ответ №2:

 Try This:
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('a').live('click', function() {
            parentDivTagId = $(this).closest("div").attr("id");
            index = parentDivTagId.substring(12, (parentDivTagId.length));
            copyString = $('#DT_Image_'   index).val();
            $('input:text').val(copyString);
        });
    });
</script>
</head>
<body>

    <div class="item">
        <div class="img_url">
            <input type="text" value="/siteimg/Designs/special-request.jpg"
                id="DT_Image_1" name="DT_Image_1" />
        </div>
        <div id="copy_to_all_1">
            <a href="#">Copy to all</a>
        </div>
    </div>

    <div class="item">
        <div class="img_url">
            <input type="text" value="" id="DT_Image_2" name="DT_Image_2" />
        </div>
        <div id="copy_to_all_2">
            <a href="#">Copy to all</a>
        </div>
    </div>

    <div class="item">
        <div class="img_url">
            <input type="text" value="" id="DT_Image_3" name="DT_Image_3" />
        </div>
        <div id="copy_to_all_3">
            <a href="#">Copy to all</a>
        </div>
    </div>

</body>
</html>
Метки: