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

Question

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

到目前为止，我可以通过ajax发送请求，并生成子菜单，但此子菜单始终显示在第一个位置：

HTML CODE（简单菜单）

<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 CODE：

$('.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');