javascript - 如何使用 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>