javascript - 如何更改嵌套在按钮中的跨度的内容？

Question

如何在“container-heading”类的替代点击中将跨度类“push-me”的内容从“+”更改为“-”。

$('#btn1').click(function() {
  $('#nrOne').toggleClass('black');
  $("#our").toggleClass('blue');
})

.black {
  background-color: #000;
}
.blue {
  color: #66cccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="container-heading">
  
  <h4 id="our">Our Services
    <span class="push-me"> + </span>
  </h4>
  
  <p>Aliquam mauris metus, viverra ac faucibus vitae, pellentesque vitae.</p>
  
</div>

<button id="btn1">Button </button>
<!--container heading end-->

到目前为止，代码有效，我只需要添加最后一个功能。非常感谢任何帮助或提示:)提前感谢您，祝您 StackOverflow 愉快!

Answer 1

您可以使用 CSS 和 ::after 使其更整洁.这会将内容直接链接到按钮的当前状态，而不是仅仅切换内容并希望它保持同步，例如如果其他一些代码设置了 CSS 类但没有更新内容。

#our > span.push-me::after {
  content:' + ';
}

#our.blue > span.push-me::after {
  content:' - ';
}

除了删除初始的 + 之外，不需要其他更改。来自 <span> HTML。

$('#btn1').click(function() {
  $('#nrOne').toggleClass('black');
  $("#our").toggleClass('blue');
})

.black {
  background-color: #000;
}
.blue {
  color: #66cccc;
}

#our > span.push-me::after {
  content:' + ';
}

#our.blue > span.push-me::after {
  content:' - ';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="container-heading">
  
  <h4 id="our">Our Services
    <span class="push-me"></span>
  </h4>
  
  <p>Aliquam mauris metus, viverra ac faucibus vitae, pellentesque vitae.</p>
  
</div>

<button id="btn1">Button </button>
<!--container heading end-->