Javascript 切换innerHTML

我已经看到各种各样的例子接近我所寻找的，但似乎没有一个能描述我到底想要什么。我是jQuery的初学者，所以欢迎解释

我想用它将

innerHTML

从

-

切换到

+

。有人知道一种有效的方法吗

jQuery/JavaScript

$(document).ready(function() {
            $(".A1").click(function() {
                $(".P1").toggle("slow");
                $(".A1").html("+");
            });
        }); 

HTML

-
东西
闷，闷，塞满，塞满，塞满，塞满，祝你好运

谢谢，任何与切换HTML元素内部文本相关的内容都会有所帮助。=）

一点说明：我正在使用第三级运算符的乘积设置

$（“#A1”）.html（）

，使用它检查

#A1

文本的当前值。如果是

+

，我将元素的文本设置为

-

，否则，我将其设置为

+

但是，您说的是“高效”。为此，需要注意的是，如果要在同一个函数中使用选择器两次或两次以上，则应将从给定的选择器中得到的jQuery对象存储在变量中，这样您就不必每次都重新运行选择器。下面是修改后的代码：

$(document).ready(function() {
    $(".A1").click(function() {
        var $A1 = $(".A1");
        $(".P1").toggle("slow");
        $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
    });
});

---

添加一个类，让您知道展开/折叠状态如何

$（文档）.ready（函数（）{
$（“.A1”）。单击（函数（）{
var$this=$（this）；
$（“.P1”）。切换（“慢速”）
$this.toggleClass（“扩展”）；
if（$this.hasClass（“扩展”））{
$this.html（“-”）；
}否则{
$this.html（“+”）；
}
});
});

-
东西
闷，闷，塞满，塞满，塞满，塞满，祝你好运
无法切换内容。
您可以检查$（'.P1'）是否可见，然后根据该值更改+/-div

比如：

$(document).ready(function() {
    $(".A1").click(function() {
     $(".P1").toggle("slow", function(){
       if($(this).is(':visible'))
           $(".A1").html("-")
       else
           $(".A1").html("+")
     });
   });
}); 

使用回调函数（
.toggle（）
方法的第二个参数）进行检查将确保在动画完成后进行检查

jsiddle:
更简短的版本

$(document).ready(function() {
    $(".A1").click(function() {
        var $self = $(this);
        $(".P1").toggle("slow", function  (  ) {
            $self.html( $self.html() == "-" ? "+" : "-");
        });
    })
}); 

这是一种在父级和CSS规则上使用类名的方法，不必更改HTML内容，也可以使用容器和类，这样您就可以在同一页面中使用多个容器和类，只需一段代码：

HTML:

Javascript:

$(document).ready(function() {
    $(".A1").click(function() {
        $(this).closest(".container")
            .toggleClass("expanded collapsed")
            .find(".P1").slideToggle("slow");
    });
});

​

工作演示：
如果（$（'.A1'）.text（）=='-'）$（'.A1'）.text（'+'））else$（'.A1'）.text（'-'）或？@powerfloug-
变量e=$（'.A1'）[0]；e、 innerHTML=e.innerHTML='+'？'-'：'+'
$(document).ready(function() {
    $(".A1").click(function() {
        var $self = $(this);
        $(".P1").toggle("slow", function  (  ) {
            $self.html( $self.html() == "-" ? "+" : "-");
        });
    })
}); 

<div class="container expanded">
    <div class="A1">
        <span class="minus">-</span>
        <span class="plus">+</span>
    </div>
    <h2 class="H1">Stuff</h2>
    <div class="P1">
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
    </div>
</div>​

.expanded .plus {display:none;}
.collapsed .minus {display: none;}

$(document).ready(function() {
    $(".A1").click(function() {
        $(this).closest(".container")
            .toggleClass("expanded collapsed")
            .find(".P1").slideToggle("slow");
    });
});