Question

我已经看到各种各样的例子接近我正在寻找的东西，但它似乎都没有描述我是如何完全想要的。我是jQuery的初学者，所以欢迎解释。

我正在寻找这个来将innerHTML从-切换到+。任何人都知道有效的方法吗？

jQuery / JavaScript

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

HTML

<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

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

Answer 1

如何添加一个让您了解展开/折叠状态的课程？

<强> HTML

<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

<强> JavaScript的：

$(document).ready(function() {
    $(".A1").click(function() {
        var $this = $(this);
        $(".P1").toggle("slow")

        $this.toggleClass("expanded");

        if ($this.hasClass("expanded")) {
            $this.html("-");
        } else {
            $this.html("+");
        }
    });
});

示例： http://jsfiddle.net/sGxx4/

Answer 2

$(document).ready(function() {
    $(".A1").click(function() {
        $(".P1").toggle("slow");
        $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").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("+")));
    });
});

Answer 3

无法切换内容。您可以检查$（'。P1'）是否可见，然后根据该值更改+/- div。

类似的东西：

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

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

JsFiddle：http://jsfiddle.net/cy8uX/

Answer 4

更短的版本

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

Answer 5

这是一种在父级和CSS规则上使用类名的方法，并且不必更改HTML内容并处理容器和类，因此您可以在同一页面中使用多个这些内容而只使用这一个代码：

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>

CSS：

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

使用Javascript：

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

工作演示：http://jsfiddle.net/jfriend00/MSV4U/

切换innerHTML

5 个答案: