javascript - jquery中的一键事件处理多个URL

Question

我有以下 HTML，它本质上是一些 ul 列表。

里面的li元素是根据ajax调用的结果动态生成的。

如果我将它们全部分开(每个 UL 的每个 ID 都有一个 change 事件)，它就可以正常工作。但这并不是很 DRY，而且看起来像是浪费代码。

我的 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>

最初 - 显示的唯一选项是营地。然后第二个 UL 从 ajax 调用返回。一旦选择，它应该显示第三个 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>

当前问题: 它只能部分起作用。如果我选择“营地”，则会显示相应的类(class)。一旦您单击某个类别，就会显示相应的位置，但该类别未选中。如果您点击一个位置，那么它就会全部消失，因为没有选择任何类别。

只是想弄清楚这一切。

Answer 1

你提到了

" the appropriate locations show up - but then class is unchecked."

...那是因为无论如何，您总是替换“class”HTML(使用$("#id_class").html(class_html))。这会删除具有用户选择的单选按钮的 HTML，并将其替换为来自服务器的完整品牌 HTML 集，当然，它不包含有关用户之前使用其替换的 HTML 执行过的操作的信息。

由于您已经获得了 target_id 信息，因此您可以使用它来了解每次需要替换 HTML 的哪些(位)(例如，我认为如果目标是位置，那么您就不需要需要替换类 HTML)。

例如

if (target_id != "id_location") $("#id_class").html(class_html)

当然，如果您希望它在不可预测的层数上完全动态，那就太简单了。但您明白了 - 您必须使用当前上下文来决定如何处理 HTML。

另一种选择(而不是上面的)是更改服务器端代码，以便它使用您在 AJAX 参数中发送的 class_id 值来编写它返回的 HTML，以便正确的单选按钮已通过标记进行了预先检查。