javascript - 如何更改列表中单击某些元素的内容？

Question

抱歉我的英语不好。我有一个问题。

我有按钮和跨度列表的结构。然后我需要点击列表项(某个跨度)，我的按钮文本在文本可点击跨度上更改。

如果我单击第一个跨度，那么我的按钮会更改“文本”或第二个跨度“文本 2”上的文本。

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

我的页面上有很多这样的结构。我如何连接这个ID？然后如果我点击 span with equal class，这会改变我所有的按钮文本吗？

Answer 1

使用 div class 和 span 来改变按钮的文本，如下所示。在多人情况下，parent() 和 prev() 是你的 friend 。

$('.collapsibleContent').find('span').click(function(e) {
  let txt = $(this).text();
  $(this).parent().prev('.switcher').text(txt);
});

span {
  color: red;
  text-decoration: underline;
  font-weight: bold;
}

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