jQuery ajax div

Question

我有一个这样的联系人列表。

NameOfContact  Accept
NameOfContact2 Accept
......

“接受”是一个链接。 当我单击“接受”时，我想发送一个带有联系人 ID 的 ajax 请求。 当 ajax 调用返回时，它应该删除 Accept 链接并在那里显示结果。

所以如果我点击联系人 2 的接受按钮，结果应该是：

NameOfContact  Accept
NameOfContact2 Added
......

我使用友好的网址，例如，接受联系人的网址是：

/action/accept/12345

其中 12345 是联系人 ID。

我的 html 是这样的（我在服务器端动态生成 html 这就是结果的样子）：

John
    <div id="choice">
    <a id="accept" name="accept" href='/action/accept/12345'>Accept</a>
    </div>

Kate
<div id="choice">
    <a id="accept" name="accept" href='/action/accept/55555'>Accept</a>
    </div>

而我的 Jquery 是这样的：

$(document).ready(function(){
        $('#accept').click(function(e){
            e.preventDefault();
            sendAcceptRequest(e.target, e);
        });
    });
    function sendAcceptRequest(target, e){
        $.post(target,
        function(data){
           $('#choice').html(data);
        }, "html");
    }

我的问题是我不知道如何区分许多选择 div。我知道我可以 添加这样的 id 'choice12345' 但我想在 sendAcceptRequest 函数中获取 e 的父级（href 的父级，即 div 元素）并将结果附加到该 div，但我不知道如何获取e 的父级并将结果附加到它。有什么想法吗？

Answer 1

在您的示例中，您的 id 属性具有相同的值。 id 必须是唯一的，因为它们应该是元素的标识。在您的情况下使用类属性。

Kate
<div id="kate" class="choice">
<a class="accept" name="accept" href='/action/accept/55555'>Accept</a>
</div>


$(document).ready(function(){
    $('.accept').click(function(e){
        e.preventDefault();
        sendAcceptRequest(e.target, e);
    });
});
function sendAcceptRequest(target, e){
    $.post(target,
    function(data){
       // this needs to be change to unique identify which element you want the html to be inserted
       $('.choice').html(data);
    }, "html");
}

Answer 2

扩展 darren 所说的内容：将 id 更改为 classes 后，在 sendAcceptRequest 函数中添加此选择器以找到 .choice 对象，以将“Accept”链接替换为“Added”。当然是在发帖成功之后。

$('.choice a[href=' + $(target).attr('href') + ']').parent().html('Added');