您是否知道如何使用单击的城市值更改ID为“#showCities”的链接的值？

Question

I have a link "All Country" that opens a modal with some cities:

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

In this modal are listed the cities that exist for all conferences stored in database. For example, if there are 2 conferences in the database and one conference has the city Newcastle and another conference has the city Leeds it shows in this modal Newcastle and Leeds.

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

When the user click on some city I want to show the conferences that have the column "city" equal to the clicked city in the #conconferes div. And its working fine.

There is only one issue when the user click in a city in the modal it works, the modal is hidden and the appropriate conferences appear. But the link All Country instead of "All Country" should appear the name of the clicked city, for example "Newcastle". Do you know how to properly achieve that?

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">
' +
                '                        <div class="card box-shaddow">
' +
                '                            <img class="card-img-top" src='+ conference.image +' alt="Card image cap">
' +
                '                            <div class="card-body">
' +
                '                                <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i>  '+conference.start_date+'</p>
' +
                '                                <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>
' +
                '                                <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>
' +
                '                            </div>
' +
                '                           <div class="card-footer d-flex justify-content-between align-items-center">
' +
                '                                 <a href="' + url + '" class="btn btn-primary text-white">More</a>' +
                ' <span class="font-weight-bold font-size-sm"></span>
'
            '                           </div>
' +
            '                    </div>';
            });

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

        },
        error: function(error) {

            console.log(error.status)
        }

    });

});

Answer 1

This will take the text from the link of your list and replace the text for the showCities link upen a click on any link in your list.

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