如何将id为#showCities的链接文本改为点击的城市名称？

这个问题很容易搞定，只需要在你现有的点击事件逻辑里加一行代码，就能把链接文本替换成用户选中的城市名称。具体操作如下：

1. 定位链接并修改文本 #

你已经在点击事件里获取到了选中的城市名称（通过var city = $(this).attr("id");，因为你把城市名绑定到了链接的id属性上），只需要用jQuery选中#showCities这个链接元素，然后把它的文本换成选中的城市名就行：

$('#showCities').text(city);

2. 放置代码的最佳位置 #

你可以把这行代码放在两个位置，根据你的体验需求选择：

• 立即更新：在获取city变量之后就添加，用户点击城市的瞬间链接文本就会变化，哪怕AJAX请求还在处理
• 请求成功后更新：放在AJAX的success回调里，确保会议内容加载完成后再更新文本

推荐放在模态框隐藏之后，这样用户关闭模态框时看到的就是更新后的文本，体验更顺畅。修改后的完整代码如下：

$("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);
            $('#conferences').empty();
            var newConferences='';
            var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
            
            $.each(result, function(index, conference) {
                $('#modal2').modal('hide');
                // 在这里更新链接文本
                $('#showCities').text(city);
                
                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)
        }
    });
});

额外说明 #

这样修改后，用户再次点击更新后的链接（比如显示"Newcastle"），依然能正常打开模态框选择其他城市——因为链接的data-toggle和data-target属性没有被修改，完全不影响原有功能。

内容的提问来源于stack exchange，提问作者johnW