如何使用 JQuery 分别向具有相同类的元素添加不同的内容
How to use JQuery to add different content to elements with same class respectively
>我使用 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
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何使用jquery遍历具有动态添加元素的数组
- jQuery appendTo 替换元素而不是添加元素,如果正在添加的元素预先存在于列表中
- 如何使用jquery添加元素
- 动态添加元素上的 HammerJS
- CSS没有'使用javascript向页面动态添加元素时无法工作
- 使用Javascript在DOM元素中添加元素
- 在添加元素时激发JS事件
- 什么's是在IE8+中添加元素的最有效方法
- d3.js在添加元素时协调
- 使用路由器链接动态添加元素
- 动态添加元素
- 在页面内容完全加载后,使用jQuery在DOM中添加元素
- j查询绑定单击不添加元素
- 在循环 jQuery 上添加元素
- 从一个页面调用 javascript 函数以在第二个页面上添加元素
- 页面加载后向<正文>添加元素时出现问题
- 动态添加元素时刷新 HTML
- 动态添加元素时不触发 JQuery 事件
- 如何使用 JavaScript 获取动态添加元素的宽度