Переключить innerHTML

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

Вот способ, который использует имена классов в родительском и 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");
    });
});

1012 *

Рабочая демоверсия: http://jsfiddle.net/jfriend00/MSV4U/

Answer 5

более короткая версия

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