否则无法使用Jquery更改跨度内的文本

Question

我试图根据其当前值更改单击span时的文本。

如果它是打开的，则将值设置为关闭。

如果关闭，则将值设置为打开。

$('.details_btn').click(function(){
    if($(this).text('Open'){
        $(this).html('Close');
    }else{
        $(this).html('Open');   
    }
});

我在这里做的事情很简单：

http://jsfiddle.net/javacadabra/ch0u1xws/

但是，它似乎从未从“关闭”恢复为“打开”，我不确定为什么。 有人可以阐明这一点吗？

非常感谢

Answer 1

您的if语句有误。 .text()使用参数来设置文本，只需将其无参数地调用即可返回当前文本。 所以：

if($(this).text('Open')){

应该：

if($(this).text() == 'Open'){

Answer 2

text（）函数可检索或设置元素的内部文本。 因此，要测试它的当前值，您应该使用：

if($(this).text() == "Open")

代替

if($(this).text('Open'))

更新到您的小提琴： http : //jsfiddle.net/ch0u1xws/2/

Answer 3

 $(document).ready(function(){ $('.details_btn').click(function(){ if($(this).text() == 'Open'){ $(this).html('Close'); }else{ $(this).html('Open'); } }); }); 

Answer 4

要获取当前值，请不要像其他人提到的那样向.text()函数提供任何参数。 但是另一种解决方案是传递一个函数来操纵当前值，如下所示：

$(document).ready(function(){
  $('.details_btn').click(function() {
    $(this).text(function(i, text) {
      return text == 'Open' ? 'Close' : 'Open';
    });
  });
});

 $(document).ready(function(){ $('.details_btn').click(function() { $(this).text(function(i, text) { return text == 'Open' ? 'Close' : 'Open'; }); }); }); 

 .details_btn{ background-color: red; color:white; padding:20px; text-transform:uppercase; font-family:calibri; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="details_btn">Open</span>