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请求来获取属于被点击类别的会议。这很好。

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

但是有一个问题。在＆＃34; Categories__Menu＆＃34;中点击类别时列表项＆＃34;更多＆＃34;将文本更改为该clicekd类别文本。你知道为什么吗？项目＆＃34;更多＆＃34;如果点击的项目在模式中而不在菜单中，则应该只保留点击的项目文本＆＃34; Categories__Menu＆＃34;。

没有ajax部分的问题：https://jsfiddle.net/69LnLa7y/2/

你知道问题出在哪里吗？

    $("a[name='category']").on('click', function(){
         alert("test");
  $('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');




  $('#showCategories').addClass('active');


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


  $(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

`$('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>')`

以上代码行导致＆＃34;更多＆＃34;文本将其更改为＆＃34;类别测试＆＃34;当你将html设置为点击类别时。

在列表项单击上添加活动类无法正常工作

1 个答案: