0

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

这是视图

<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());
    });
});

我不知道如何从动态创建的列表中获取正确的地址。

4

1 回答 1

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>

我使用了 a 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);
    });
});

示例小提琴

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

于 2013-10-28T11:06:05.267 回答