javascript - jquery中的一键事件处理的多个UL
问题描述
我有以下 HTML,基本上是一些ul
列表。
里面的li
元素是根据ajax调用的结果动态生成的。
如果我将它们全部分开(change
每个 UL 的每个 ID 的事件),它工作正常。但这不是很干,而且似乎是在浪费代码。
我的 HTML 是这样的:
<ul id="id_camp" class="registration-data-option">
<li><label for="id_camp_0"><input type="radio" name="camp" value="1" class="registration-data-option" required="" id="id_camp_0"> Camp One</label></li>
<li><label for="id_camp_1"><input type="radio" name="camp" value="2" class="registration-data-option" required="" id="id_camp_1"> Another Camp</label></li>
<li><label for="id_camp_2"><input type="radio" name="camp" value="3" class="registration-data-option" required="" id="id_camp_2"> PE Camp</label></li>
</ul>
<ul id="id_class" class="registration-data-option">
<li><label for="id_class_0"><input type="radio" name="class" value="1" class="registration-data-option" required="" id="id_class_0"> class One</label></li>
<li><label for="id_class_1"><input type="radio" name="class" value="2" class="registration-data-option" required="" id="id_class_1"> Another class</label></li>
<li><label for="id_class_2"><input type="radio" name="class" value="3" class="registration-data-option" required="" id="id_class_2"> PE class</label></li>
</ul>
<ul id="id_location" class="registration-data-option">
<li><label for="id_location_0"><input type="radio" name="location" value="1" class="registration-data-option" required="" id="id_location_0"> location One</label></li>
<li><label for="id_location_1"><input type="radio" name="location" value="2" class="registration-data-option" required="" id="id_location_1"> Another location</label></li>
<li><label for="id_location_2"><input type="radio" name="location" value="3" class="registration-data-option" required="" id="id_location_2"> PE location</label></li>
</ul>
最初 - 显示的唯一选项是营地。然后从 ajax 调用返回第二个 UL。一旦选择,它应该显示第三个 UL,等等。
我要完成的工作:
一个动态/链接下拉系统,在用户选择第一个下拉列表后显示下一个下拉列表,因为数据是动态生成的。
我的 jquery 看起来像这样:
$(".registration-data-option").change(function(event) {
var target_id = $(event.target).closest('ul').attr('id') // id_camp, id_class, id_location
var url = $("#registrationForm").attr("data-choices-update-url");
var camp_id = $('#id_camp').find('input:checked').val()
var class_id = $('#id_class').find('input:checked').val()
var location_id = $('#id_location').find('input:checked').val()
var person_id = $('#id_person').find(":selected").val()
$.ajax({
url: url, //this returns data - which is an HTML snippet
data: {
'target_id': target_id,
'camp_id': camp_id,
'class_id': class_id,
'location_id': location_id,
'person_id': person_id
},
success: function (data) {
var class_html = $(data).get(0).innerHTML
var location_html = $(data).get(2).innerHTML
$("#id_class").html(class_html)
$("#id_location").html(location_html)
$(event.target).prop('checked',true)
}
});
});
最后,从 AJAX 返回的 HTML 片段如下所示:
<div id="classChoices">
{% for class in classes %}
<li>
<label for="id_class_{{ forloop.counter }}">
<input type="radio"
name="class"
class="registration-data-option"
value="{{ class.pk }}"
required
id="id_class_{{ forloop.counter }}">
{{ class.name }}
</label>
</li>
{% endfor %}
</div>
<div id="locationChoices">
{% for location in locations %}
<li>
<label for="id_location_{{ forloop.counter }}">
<input type="radio"
name="location"
class="registration-data-option"
value="{{ location.pk }}"
required
id="id_location_{{ forloop.counter }}">
{{ location.name }}
</label>
</li>
{% endfor %}
</div>
当前问题: 它仅部分有效。如果我选择“营地”,则会显示相应的课程。一旦你点击了一个类——然后相应的位置就会出现——但是类是未选中的。如果您单击一个位置,则它会全部消失,因为没有选择任何课程。
只是想弄清楚这一切。
解决方案
你提到那个
“出现了适当的位置 - 但随后课程未选中。”
...那是因为您总是替换“类”HTML,无论如何(使用$("#id_class").html(class_html)
)。这将删除具有用户选择的单选按钮的 HTML,并将其替换为来自服务器的完整品牌的 HTML 集,其中当然不包含有关用户之前对它替换的 HTML 所做的操作的信息。
由于您已经获得了target_id
信息,您可以使用它来了解每次需要替换哪些(位)HTML(例如,我认为如果目标是位置,那么您不需要替换 HTML 类)。
例如
if (target_id != "id_location") $("#id_class").html(class_html)
当然,如果您希望它在不可预测的层数上完全动态,那就太简单了。但是您明白了——您必须使用当前上下文来决定如何处理 HTML。
另一种选择(而不是上面的)是更改服务器端代码,以便它使用class_id
您在 AJAX 参数中发送的值来编写它返回的 HTML,以便已经通过标记预先检查了正确的单选按钮。
推荐阅读
- python - 如何使用 Stanza 用英语进行标记化
- python - 如何使用 timeit 标准库函数在 python 中测量我的函数的执行时间
- javascript - 使用 DOMParser 解析 HTML 对 XSS 安全吗?
- amazon-web-services - 为在 ASG 中运行的 logstash 集群配置 AWS 网络负载均衡器
- javascript - Web Audio API 依次播放笔记
- javascript - 需要一个数组来存储具有相同属性的不同对象的不同数据(或其他一些有意义的策略)
- html - 如何使 HTML 可折叠按钮默认为展开?
- javascript - JSX 中的循环和渲染
- angular - 文件中的多个路由器插座不适用于延迟加载
- pdf - ImageMagick - 将多页 PDF 转换为 TIFF 导致每个 TIFF 页面有 3 个相同的图像