Знаете ли вы, как изменить значение ссылки с идентификатором "#showCities" на значение города, по которому щелкнули?

Question

У меня есть ссылка «Вся страна», открывающая модальное сообщение с некоторыми городами:

<a class="city" id="showCities" data-toggle="modal" data-target="#modal2" href="">All Country</a>

В этом режиме перечислены города, которые существуют для всех конференций, хранящихся в базе данных. Например, если в базе данных есть 2 конференции, и у одной конференции есть город Ньюкасл, а у другой конференции город Лидс, который он показывает в этом модальном Ньюкасле и Лидсе.

<ul class="modal-list">
    @foreach($cities as $city)
        <li class="col-lg-4 col-md-6 col-sm-12">
            <a  class="" name="city" id="{{$city}}">{{$city}}</a>
        </li>
    @endforeach
</ul>

Когда пользователь нажимает на какой-то город, я хочу показать конференции, у которых столбец «город» равен выбранному городу в div #conconferes. И работает нормально.

Существует только одна проблема, когда пользователь щелкает по городу в модале, в котором он работает, модал скрыт и появляются соответствующие конференции. Но по ссылке Вся страна вместо «Вся страна» должно появиться название города, по которому щелкнули, например «Ньюкасл». Вы знаете, как этого добиться?

JQuery:

$("a[name='city']").on('click', function(){


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


    $.ajax({

        url: '{{ route('city.conferences',null) }}/' + city,
        type: 'GET',
        success:function(result){
            console.log(result)

            alert(result);
            $('#conferences').empty();
            var newConferences='';
            var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
            $.each(result, function(index, conference) {
                $('#modal2').modal('hide');
                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' +
                '                                <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i>  '+conference.start_date+'</p>\n' +
                '                                <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
                '                                <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>\n' +
                '                            </div>\n' +
                '                           <div class="card-footer d-flex justify-content-between align-items-center">\n' +
                '                                 <a href="' + url + '" class="btn btn-primary text-white">More</a>' +
                ' <span class="font-weight-bold font-size-sm"></span>\n'
            '                           </div>\n' +
            '                    </div>';
            });

            $('#conferences').html(newConferences);

        },
        error: function(error) {

            console.log(error.status)
        }

    });

});

Answer 1

Это возьмет текст из ссылки в вашем списке и заменит текст ссылки showCities при щелчке на любой ссылке в вашем списке.

<script>
    $('a[name="city"]').on('click', function(){
        $('#showCities').text($(this).text());
    };
</script>