单击菜单 <li> 并生成其他子菜单

Question

朋友有问题。 从菜单中单击链接时，我需要在所选子菜单项下方生成。

到目前为止，我可以通过ajax发送请求，并生成一个子菜单，但是这个子菜单总是出现在第一个位置：

HTML 代码（简单菜单）

<ul>
   <li><a href="#" data-id="1" class="region_id">Item 1</a>
   <ul id="city"></ul>
   </li>
   <li><a href="#" data-id="2" class="region_id">Item 2</a>
   <ul id="city"></ul>
   </li>
   <li><a href="#" data-id="3" class="region_id">Item 3</a>
   <ul id="city"></ul>
   </li>
   <li><a href="#" data-id="4" class="region_id">Item 4</a>
   <ul id="city"></ul>
   </li>
   <li><a href="#" data-id="5" class="region_id">Item 5</a>
   <ul id="city"></ul>
   </li>
</ul>

JS代码：

$('.region_id').on('click', function(event) {
    event.preventDefault();

    $.get('{!! url("filter_city") !!}', {id : $(this).attr('data-id'), token: $('input[name="_token"]').val() }, function(data) {

       var cities = $('#city');
        cities.empty();

        $.each(data, function(key, value) {
          cities.append($("<li></li>").text(value)); 
        });

    });
});

单击任何选项时得到的结果

因为我能达到我想要的吗？来自智利的问候

Answer 1

HTML 中的标识符必须是唯一的。您可以使用一个通用类，然后使用各种方法遍历 DOM。

这是一个例子，我使用city 作为 CSS 类而不是 ID。然后可以使用这些方法中的任何一种来识别相关元素。

var cities = $(this).next('.city');
//var cities = $(this).siblings('.city');
//var cities = $(this).closest('li').find('.city');

HTML

<ul>
   <li>
        <a href="#" data-id="1" class="region_id">Item 1</a>
        <ul class="city"></ul>
   </li>
</ul>

脚本

$('.region_id').on('click', function(event) {
    event.preventDefault();
    var cities = $(this).next('.city');

    $.get('{!! url("filter_city") !!}', 
        {
            id : $(this).data('id'), 
            token: $('input[name="_token"]').val() 
        }, 
        function(data) {       
            cities.empty();
            $.each(data, function(key, value) {
              cities.append($("<li></li>").text(value)); 
            });
        }
    );
});

我建议您使用.data() 而不是attr() 来获取data-* 自定义属性值。

var id = $(this).data('id');