单击列表中的某些项目时如何更改内容？

Question

对不起，我的英语不好。我有问题。

我有按钮和跨度列表的构造。然后我需要点击列表项（一些跨度），我的按钮文本在文本可点击跨度上更改。

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

<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 连接这个？然后，如果我单击具有相同类的跨度，这是更改我所有的按钮文本吗？

Answer 1

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

$('.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>

Answer 2

为choise__block-item 类添加点击事件（choise__block-item 类的所有跨度），使用text() 和set 获取点击的span 的文本到按钮。

$('span.choise__block-item').click(function () {
    $('.switcher').text($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>

也可以看到.html()的引用。

Answer 3

您可以在 jquery 中使用text() 获取列表文本，希望对您有所帮助

$('.choise__block-item').click(function(e){
    $('.switcher').text($(this).text())
})

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

Answer 4

据我了解，您的要求是在单击 span 时更改按钮的文本。

看看下面的代码

$('.collapsibleContent > span').click(function(){
  var clickedTxt = $(this).text();
  $(this).parents('.box').find('.switcher').text(clickedTxt);
});

.box{ width:300px; float:left; border:1px solid #ff0000; margin:5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="switcher collapsible">button1</button>
<div class="collapsibleContent">                                         
  <span class="choise__block-item">Text</span>                                       
  <span class="choise__block-item">Text2</span>
</div>
</div>

<div class="box">
<button class="switcher collapsible">button2</button>
<div class="collapsibleContent">                                         
  <span class="choise__block-item">Text3</span>                                       
  <span class="choise__block-item">Text4</span>
  <span class="choise__block-item">Text5</span>
</div>
</div>


<div class="box">
<button class="switcher collapsible">button3</button>
<div class="collapsibleContent">                                         
  <span class="choise__block-item">Text6</span>                                       
  <span class="choise__block-item">Text7</span>
  <span class="choise__block-item">Text8</span>
</div>
</div>


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