定位 AJAX 会通过使用“rel”属性生成正确的 DIV
Positioning AJAX results in the right DIV by using "rel" attribute
我有这个HTML代码:
<div class="ct-slide" style="left: 55px;">
<div class="ct-menu-text shadow" style="display: block;">
<ul>
<li rel="electronica" data-id="1" title="Electrónica">Electrónica <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="hogar" data-id="3" title="Hogar">Hogar <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="ropa-zapatos-y-accesorios" data-id="4" title="Ropa, Zapatos y Accesorios">Ropa, Zapatos y Accesorios <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="joyas-y-relojes" data-id="5" title="Joyas y Relojes">Joyas y Relojes <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="salud-y-cuidado-personal" data-id="6" title="Salud y Cuidado Personal">Salud y Cuidado Personal <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="deportes-y-actividades-outdoors" data-id="7" title="Deportes y Actividades Outdoors">Deportes y Actividades Outdoors <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
<li rel="libros" data-id="8" title="Libros">Libros <div class="ct-pointer-cover"></div><div class="ct-pointer"></div></li>
</ul>
</div>
<div rel="electronica" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="hogar" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="ropa-zapatos-y-accesorios" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="joyas-y-relojes" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="salud-y-cuidado-personal" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="deportes-y-actividades-outdoors" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div rel="libros" class="ct-submenu shadow" style="width: 1665px; display: none;">
...
</div>
<div title="Click para abrir" class="ct-open" style="display: none;"></div>
<div style="" title="Click para cerrar" class="ct-close"></div>
</div>
由于您可以看到每个 LI 和 DIV 都具有相同的 rel
属性,我需要在正确的 DIV 元素中通过此 AJAX 调用编写返回的 HTML,但我无法让它工作。例如,如果我移动li rel="electronica"
AJAX 调用返回的内容(请参阅下面的代码)应该显示在 div rel="electronica"
中,如何?有什么帮助吗?
// begin: categories picker
var k = 1;
$(".ct-menu, .ct-menu-text").on("mouseenter", "li", function() {
var id = $(this).attr('data-id');
var next = $(this).closest("div[id]").nextAll().length;
$("#selected_category").attr("value", id);
if (next > 0) {
k = k - next;
$(this).closest("div[id]").nextAll().remove();
}
$.ajax({
type: 'GET',
url: Routing.generate('category_subcategories', {parent_id: id}),
dataType: "json",
success: function(data) {
if (data.length != 0) {
$(".ct-submenu").attr('rel').eq(id).append('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
var LIs = "";
$.each(data, function(index, value) {
$.each(value, function(i, v) {
LIs += '<li><a class="step ct-sub-menu-text" data-id="' + i + '" href="#">' + v + '</a></li>';
})
});
$('#step' + (k + 1)).html(LIs);
k++;
}
}
});
});
// end: categories picker
将
单击的LI
的rel
保存在变量中。然后在选择器中使用该变量来查找匹配的DIV
。
当您尝试$(".ct-submenu").attr("rel").eq(0)
时,这不起作用,因为.attr("rel")
不是选择器,它是一个返回 rel
属性内容的方法。
var k = 1;
$(".ct-menu, .ct-menu-text").on("mouseenter", "li", function() {
var id = $(this).attr('data-id');
var rel = $(this).attr('rel');
var next = $(this).closest("div[id]").nextAll().length;
$("#selected_category").attr("value", id);
if (next > 0) {
k = k - next;
$(this).closest("div[id]").nextAll().remove();
}
$.ajax({
type: 'GET',
url: Routing.generate('category_subcategories', {parent_id: id}),
dataType: "json",
success: function(data) {
if (data.length != 0) {
$(".ct-submenu[rel="+rel+"]").append('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
var LIs = "";
$.each(data, function(index, value) {
$.each(value, function(i, v) {
LIs += '<li><a class="step ct-sub-menu-text" data-id="' + i + '" href="#">' + v + '</a></li>';
})
});
$('#step' + (k + 1)).html(LIs);
k++;
}
}
});
});
正如昆汀评论的那样,这不是对rel
属性的恰当使用。我建议你给.ct-submenu
元素 ID,并将匹配的 ID 放在 LI 的 data-submenu
属性中。然后你可以做:
var rel = $(this).data('submenu');
回调中的选择器将是:
$("#"+rel)
相关文章:
- 使用类属性切换Div值
- 使用 Div 标签的 location.href 属性时,Eval 不起作用
- 将必需属性添加到DIV On单选按钮更改中的输入
- 切换一个Div与按钮改变左边距属性
- 添加/删除 CSS 类属性以尊重不基于 Div id 的类
- 使用 Javascript 从 Div 中检索 href 属性(链接)
- 从我的 Div 背景图像属性中循环 3 个图像
- 垂直标签:删除没有jQuery或固定位置属性的UL和DIV中断
- 按内联“样式”属性对 Div 进行排序
- 定位 AJAX 会通过使用“rel”属性生成正确的 DIV
- 按属性对Div进行排序-asc或desc
- JavaScript基本问题:针对DOM中的特定Div并更改属性
- 更改类或CSS”;显示“;DIV的属性,并平滑地显示它
- 绑定在knockoutjs中拖动DIV元素属性到对象属性
- jQuery用动态ID和定义的CSS属性创建DIV(定义该DIV的外观和位置)
- 显示/隐藏基于数据属性的Div
- Div类搜索使用数据过滤属性
- 改变在IE 11中不工作的DIV的旋转速度,使用JS来更新CSS动画属性
- 动态添加的Div不会拾取CSS属性
- 在DIV中显示图像的标题属性