Question

我有一个包含某些类别的菜单：

<div class="col p-0 m-0">
    <ul class="Categories__Menu">
        @foreach($categories->take(6) as $category)
            <li class="active">
                <a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
            </li>
        @endforeach
        <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More</a></li>
    </ul>
</div>

如果用户点击“更多”，则会打开包含更多类别的模式，该模式具有以下内容：

<div class="modal fade bd-example-modal-lg" id="categoriesModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <ul class="modal-list row">
                            <li class="col-lg-4 col-md-6 col-sm-12">
                                <a class="">All categories</a>
                            </li>
                            @foreach($categories as $category)
                                <li class="col-lg-4 col-md-6 col-sm-12">
                                    <img src="{{ $category->image }}"/>
                                    <a name="category" id="{{$category->id}}">{{$category->name}}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
    </div>
</div>

我有一些jquery来做一个ajax请求来获取属于被点击类别的会议。这很好。

但我希望点击的类别在菜单“Categories__Menu”中变为活动状态。这是有效的，点击的类别保持活动状态。

但是有一个问题。当在模态中单击某个类别时，“更多”文本将更改为所单击类别的文本，这是正确的，但是此项将“更多”更改为所单击项目的文本也应该将类更改为活性

你知道如何实现这个目标吗？

解决问题：jsfiddle.net/69LnLa7y/7

jQuery的：

    $("a[name='category']").on('click', function(){
         if($(this).closest(".modal-list").length) {
    $('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
    $(this).parent('li').addClass('active');
    $('#categoriesModal').modal('hide');

  }
  // $('#categoriesModal').modal('hide');
  $(".active").removeClass("active")
  $('#showCategories').addClass('active');


  var category_id = $(this).attr("id");

  //$('.Categories__Menu li').addClass('active');
  $(this).parent('li').addClass('active');


        $.ajax({

            url: '{{ route('category.conferences',null) }}/' + category_id,
            type: 'GET',
            success:function(result){
                $('#conferences').empty();
                var newConferences='';
                var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
                $.each(result, function(index, conference) {
                    var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);

                    newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
    '                        <div class="card box-shaddow">\n' +
    '                            <img class="card-img-top" src='+ conference.image +' alt="Card image cap">\n' +
    '                            <div class="card-body">\n' +
    '                                <h5 class="card-title">'+conference.name+'</h5>\n' +
    '                            </div>\n' +
    '                    </div></div>';
                });
                $('#conferences').html(newConferneces);
            },
            error: function(error) {
                console.log(error.status)
            }
        });
    });

Answer 1

在jsfiddle link中，您应该考虑以下几点：

您应该在功能的第一个位置删除所有相关active代码中的li课程（根据您在问题中指定的内容）
在if内，您应该将active课程添加到li，其中a标记的ID为showCategories（您添加了active } class to showCategories这是错误的，因为它是a标记，而不是li标记。
您应该将else条件添加到if，这样如果所选项目不是来自您的模式，则应将active类添加到li选中a代码。

Here is the working Jsfiddle

在模态中单击列表项时，更改文本并将活动类添加到另一个列表项

1 个答案: