Jquery加号和减号符号切换

Question

我在菜单上使用以下语法。

<div id="flip5"><a href="#">Demo <span id="togglebut">+</span></a></div>

我正在尝试弄清楚当用户点击链接时如何切换+。

链接会打开一个隐藏的div。

到目前为止，我已经得到了以下代码，但它并不是真正的切换。

$("flip5").click(function(){
  $("togglebut").html("-");
}); 

这里有什么帮助吗？

Answer 1

检查HTML是否已"+"，如果已将其更改为"-"，反之亦然：

$("#flip5").click(function(){
    $("#togglebut").html(function(_, html) {
        return $.trim(html) == '+' ? '-' : '+';
    });
}); 

FIDDLE

Answer 2

假设你使用jquery：

$("#flip5").click(function(){
  var $but = $("#togglebut");
  $but.html($but.html() == "+" ? "-" : "+");
});

这会在#togglebut变量中存储$but范围的jquery对象，主要是为了提高可读性。然后使用？：运算符将新值从最后一个值切换为+/-相反的值。

jsfiddle：http://jsfiddle.net/9s33C/

更具可读性的版本可能是：

$("#flip5").click(function() {
  var $but = $("#togglebut");

  if($but.html() == "+")
    $but.html("-")
  else
    $but.html("+")
});