jQuery的 - 切換文本

-2

function switch() 
{ 
    if(document.getElementById('mydivid').innerHTML == "Show +") 
     document.getElementById('mydivid').innerHTML = "Show -"; 
    else 
     if(document.getElementById('mydivid').innerHTML == "Show -") 
      document.getElementById('mydivid').innerHTML = "Show +"; 
}

但我期待與jQuery來做到這一點。我有：

$(document).ready(function() { 
     $("#mydivid").click(function() { 
      // if #mydivid is "Show +" do: $("#mydivid").html("Show -"); 
      // else if #mydiv is "Show -" do: $("#mydivid").html("Show +"); 
     }); 
    });

如何使用這些if s？或者我可以使用只有一個div元素的切換器？

來源

2012-03-06 fj123x

我認爲這應該工作。

$(document).ready(function() { 
     $("#mydivid").click(function() { 
      if ($(this).text() === "Show +") 
       $(this).text("Show -"); 
      else 
       $(this).text("Show +"); 
     }); 
    });

來源

2012-03-06 22:37:21 1b0t

您可以使用.text()函數來獲取div內容作爲文本。嘗試下面的代碼。

DEMO

$(document).ready(function() { 
    $("#mydivid").click(function() { 
     if ($(this).text() == 'Show +') { 
      $(this).text('Show -'); 
     } else if ($(this).text() == "Show -") { 
      $(this).text('Show +'); 
     } 
    }); 
});

PS：包裹.text內$.trim()如果div有white space/newline。

來源

2012-03-06 22:35:10

你並不真正需要的'其他if';只是一個'else'很好，但是我認爲在元素的文本被另一個JS修改的情況下有明確的行爲是很好的。如果你的if（）也使用大括號，那麼+1。 – Bojangles 2012-03-06 22:37:08

@JamWaffles確實，但OP原始代碼有它，所以我添加了其他的，而不是其他的。 – 2012-03-06 22:38:55

這是真的 - 我沒有足夠好的閱讀OP。我並不是說在這種情況下明確表示這是一件壞事，但總是在那裏刪除第二個'if（）'並且只有一個'else'。 – Bojangles 2012-03-06 22:47:52

$(document).ready(function() { 
    $("#mydivid").click(function() { 
     var that = $(this); 

     if(that.text() == 'Show +') that.text('Show -'); 
     else that.text('Show +'); 
    }); 
});

來源

2012-03-06 22:35:37 xandercoded

這裏是一種僅現有文本做到這一點：

$(document).ready(function() { 
    $("#mydivid").click(function() { 
     $(this).text(function(i, old){ 
      return "Show "+ (/\+/.test(old)) ? '-': '+'; 
     }) 
    }); 
});

我想這是用於切換在這種情況下觸發類會是一個更好的解決方案的元素，但它不是清楚完整的代碼將做什麼。

來源

2012-03-06 22:41:11 charlietfl

Demo

$(document).ready(function() { 
    $("#mydivid").click(function() { 
     $(this).text(function(i,text) { 
      return text === 'Show +' ? 'Show -' : 'Show +'; 
     });    
    }); 
});

來源

2012-03-06 22:45:12 shaunsantacruz

jQuery的 - 切換文本

回答

相關問題