Question

我想在filter_selected_det容器中添加城市名称。

工作：点击任何<a>元素，它会删除之前的城市名称，并替换为点击的城市名称。

需要解决方案：

实施例。点击'珀斯'城市名称..它必须添加到'filter_selected_det'。另一个城市名称'悉尼'点击，它必须添加现有的'珀斯'像'珀斯，悉尼'。喜欢明智的'珀斯，悉尼，甲米，墨尔本'

如果超过最多3个城市，则不应添加。

请让我知道评论。

HTML：

<div class="filter_selected_det">

</div>
<div class="city_container">
    <a href="#">Perth</a>
    <a href="#">Sydney</a>
    <a href="#">Krabi</a>
    <a href="#">Melbourne</a>
</div>

JS：

$('.city_container a').on('click', function (e) {
    e.preventDefault();
    $(this).addClass('selected');
    var $selectCities = $(this).html();
    $('.filter_selected_det').html($selectCities);
});

Answer 1

您需要将当前DIV内容与新内容连接起来：

$('.filter_selected_det').html($('.filter_selected_det').html() + ',' + $selectCities);

Answer 2

你需要追加新城市，而不是替换所有的html：

$('.city_container a').on('click', function (e) {
    e.preventDefault();
    $(this).addClass('selected');
    var newCity = $('<div/>').html($(this).html());
    $('.filter_selected_det').append(newCity);
});

你可以在css中添加逗号，如：

.filter_selected_det > div { display: inline }
.filter_selected_det > div:not(:first-child):before { content: ','; display: inline }

单击..使用逗号将Div文本添加到另一个DIV

2 个答案: