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

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

2 голосов
/ 02 ноября 2011

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

<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, чтобы все было готово.

Ответы [ 2 ]

4 голосов
/ 02 ноября 2011 
$(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())
    });
});

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

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

часть вопроса, изменено click() на live() просто для безопасности.

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

1 голос
/ 02 ноября 2011 
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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...