如何使用 JQuery 分别向具有相同类的元素添加不同的内容

How to use JQuery to add different content to elements with same class respectively

本文关键字:添加 元素 同类 JQuery 何使用      更新时间:2023-09-26

>我使用 django 创建了一个具有属性名称和地址的模型公司,并且只显示查询集中所有公司的名称。我希望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%}

get_address django 中的函数:

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%}

是的,你可以对你的 html 生成做这样的事情

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

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

{"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"]);
}

尝试使用 id 的属性,将 id 发送到 ajax,获取地址并将其添加到下一个 address_result ul:

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

.js:

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

get_address功能:

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
    company_id = request.POST.get('id','')
else:
    company name = ''
companies = company.objects.filter(name=company_name).filter(id=company_id) 
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 & id