如何显示许多字符串与 ajax 的连接?(或不)

Question

我有一些文本。我需要<span class="switcher__result">默认值是display: none但是如果我<button class="switcher switcher__Last collapsible">更改文本，我的结果跨度是display: block，我的跨度的文本是我所有<button class="switcher switcher__Last collapsible">的串联文本

<button class="switcher switcher__Last collapsible">X1</button>
<button class="switcher switcher__Last collapsible">X2</button>
<button class="switcher switcher__Last collapsible">X3</button>
<button class="switcher switcher__Last collapsible">X4</button>
<span class="switcher__result">X1 X2 X3 X4</span>

此脚本更改按钮中的文本。

$('.collapsibleContent').find('span').click(function (e) {
let txt = $(this).text().split('-')[0];
$(this).parent().prev('.switcher').text(txt + 'u00A0');
});

如何为<span class="switcher__result">X1 X2 X3 X4</span>制作脚本。

<button class="switcher switcher__Last collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
</div>
<button class="switcher switcher__Last collapsible">X2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
</div>

Answer 1

你去吧。检查span文本的长度，并连接字符串并在span标签上显示结果。

$('.collapsibleContent').find('span').click(function(e) {
let txt = $(this).text();
$(this).parent().prev('.switcher').text(txt);
$('.result').show();
if ($('.result').html().length > 0) {
txt = $('.result').text() + ', ' + txt;
$('.result').text(txt);
}
$('.result').text(txt);
});

span {
color: red;
text-decoration: underline;
font-weight: bold;
}
.result {
display: none;
color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
<button class="switcher collapsible">X2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text3</span>
<span class="choise__block-item">Text4</span>
</div>
Result:<span class='result'></span>