Question

我有一份地址列表。每个地址都有2个链接，允许用户单击将地址添加到集合textarea或交付文本区域。

这是视图

<p>Recent addresses</p>
<ul>
    <% @recent_addresses.each do |address| %>
        <li>
            <%= address %>
            <%= link_to 'Add to collection text area', '#', class: 'collection' %>
            <%= link_to 'Add to delivery text area', '#', class: 'delivery' %>
        </li>
    <% end %>
</ul>

这是等效的html

<p>Recent addresses</p>
<ul>
    <li>
        14 Main road
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
    <li>
        22 Main road
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
</ul>

到目前为止，我有以下javascript / jquery代码

$(function(){
    $(".collection").click(function(e){
        e.preventDefault();
        $( "#collection_address" ).val($(this).text());
    });
});

$(function(){
    $(".delivery").click(function(e){
        e.preventDefault();
        $( "#delivery_address" ).val($(this).text());
    });
});

我无法弄清楚如何从动态创建的列表中获取正确的地址。

Answer 1

首先，修改HTML以在地址文本周围包装元素。这样可以更容易地选择：

<p>Recent addresses</p>
<ul>
    <li>
        <span class="address">14 Main road</span>
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
    <li>
        <span class="address">22 Main road</span>
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
</ul>

我使用了span，但您需要的任何元素都可以使用。 class是重要的一点。您可以通过textNodes进行拖网查找以查找值，但如果因任何原因更改了标记，则会出现问题。使用此方法，只要文本位于具有该类的元素中，就可以将其放在li内的任何位置。

然后，您需要更改jQuery以检索此值：

$(function() {
    $(".collection").click(function(e){
        e.preventDefault();
        var addr = $(this).closest('li').find('.address').text();
        $("#collection_address" ).val(addr);
    });

    $(".delivery").click(function(e){
        e.preventDefault();
        var addr = $(this).closest('li').find('.address').text();
        $( "#delivery_address" ).val(addr);
    });
});

Example Fiddle

注意，您可以将所有jQuery代码依赖于DOM在单个DOMReady块中 - 不需要每个语句都在其自己的语句中。

如何从动态创建的列表中填充文本区域

1 个答案: