javascript - 如何使用JQuery为同一个类的元素分别添加不同的内容

Question

我使用 django 创建了一个模型 company ，其属性为 name 和 地址，并且仅显示查询集中所有公司的名称。我想要jquery做的是当点击名称时显示相应的地址(通过ajax)。

下面是我的代码。所以ajax请求正在被正确处理并且能够显示相应的地址，但是所有<ul class="address_result">每次显示相同的内容，这是有道理的，因为我添加 html(data)到类及其所有元素。有没有办法分别显示每个 <div class="name_address"> 中每个名称的地址，也许添加id？提前致谢!

JQuery:

$(function(){
    $('.name').on('click', function(){
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': $(this).html(),
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()
            },
            success: get_address_success,
            datatype:'html'
        });
    });

});

function get_address_success(data, textStatus,jqXHR){
    $('.address_result').html(data);
}

html:

{% for obj in list %}
<div class="name_address">
    <h4 class="name">{{ obj.name }}</h4>
    <ul class="address_result"></ul>
</div>
{% endfor%}

django 中的 get_address 函数:

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
else:
    company name = ''
companies = company.objects.filter(name=company_name) #Name different companies can have the same name in this case
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name

解决方案:

$(function(){
    $('.name').on('click', function(){
        var Name=$(this).html();
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': Name,
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()
            },
            success: get_address_success,
            datatype:'html'
        });
        function get_address_success(data, textStatus,jqXHR)
        {
            $("#"+Name).html(data);
        }
    });

});




{% for obj in list %}
<div>
    <h4 class="name">{{ obj.name }}</h4>
    <ul class="address_result" id="{{obj.name}}"></ul>
</div>
{% endfor%}

Answer 1

是的，您可以对 html 生成执行类似的操作

<div id="{{ obj.name }}" class="name_address">

然后使用该 ID 作为从后端发送的响应的一部分来选择单个 address_result。像这样的 json 围绕着你的存在ing 数据就可以了

{"name" : "name_of_block_to_change",
 "content" : data}

你的成功回调可以做到这一点

function get_address_success(data, textStatus,jqXHR){
     var id = data["name"];
     $('#'+id+' .address_result').html(data["content"]);
}