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

Question

如何在“容器标题”类的替代点击上将“push-me”的“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-->

到目前为止，代码有效，我只需要添加最后一个功能。任何帮助或提示都非常感谢:)提前谢谢你＆amp;祝你有个美好的一天StackOverflow！

Answer 1

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

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

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

除了从+ HTML中删除初始<span>之外，不需要进行任何其他更改。

＆＃13;

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用jquery

设置它

$(".push-me").text(" - ");

Answer 3

还添加此脚本： - ＆gt;

$('.container-heading').click(function() 
{
    if ($(".push-me").text() == "-")
    {
          $('.push-me').text('+');
    }
    else
    {
          $('.push-me').text('-');
    }
});

Answer 4

将点击处理程序添加到.push-me。

$('.push-me').on('click', function() {
 var txt = $(this).text();
  $(this).text(txt.trim()  == '+' ? ' - ' : ' + ');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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> <!--container heading end-->

Answer 5

你的意思是，像这样：

$('.container-heading').click(function() {
  var pushme = $(this).find('.push-me');
  var txt = $(pushme).text();
  $(pushme).text( txt === ' + ' ? ' - ' : ' + ');        
});

工作小提琴：https://jsfiddle.net/robertrozas/Lw4Lv5g3/

Answer 6

我建议您不要使用span直接访问class，因为许多元素可以拥有相同的类。您应该使用按钮id，然后在其中使用class来搜索元素。

＆＃13;

＆＃13;

$('#btn1').click(function() {
  $('#nrOne').toggleClass('black');
  $("#our").toggleClass('blue');
  var text = $("#our > .push-me").text().trim() === "+"?"-": "+";
  $("#our > .push-me").text(text);
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;