jquery text odhaliť s okamžitou zmenou textu - jquery, html, css

Vytváram stránku s často kladenými otázkami, kde sú uvedené otázky, ale vysvetlenia sú skryté - kliknutím na otázku zobrazíte vysvetlenia. Pekné veci.

Chcem pridať malú textovú výzvu (v a <span>) vedľa otázky, ktorá hovorí „viac“, keď je vysvetlenie skryté, a „menej“, keď je vysvetlenie zobrazené. Nemôžem prísť na to, ako to urobiť.

Vyskúšal (a) som použitie niektorých príkazov If / else, ale nemôžem ich uviesť do činnosti. Existuje ľahší spôsob, ako to urobiť?

Tu je môj súčasný skript, bez zmeny textu „viac / menej“:

$(document).ready(function() {
$(".faqtitle").click(function () {
$(this).next("p").animate({
height: "toggle",
opacity: "toggle"
}, 400);
});
});

... a tu sú husle, ktoré všeobecne zobrazujú to, s čím pracujem: http://jsfiddle.net/V5LDQ/

Vďaka!

odpovede:

2 pre odpoveď č. 1

A čo toto:

$(document).ready(function() {
$(".faqtitle").click(function () {
$(this).next("p").animate({
height: "toggle",
opacity: "toggle"
}, 400);
var expand = $(this).find("span");
if (expand.html() == "more") {
expand.html("less");
} else {
expand.html("more");
}
});
});

Pracovná husle tu.

---

edit:

Tu je pekný jednoduchý spôsob, ako začleniť niektoré zmeny CSS pre túto zmenu textu. Toto používa jQuery fadeIn a fadeOut metódy. Ďalšiu dokumentáciu nájdete tu.

  var expand = $(this).find("span");
expand.fadeOut(500, function() {
if (expand.html() == "more") {
expand.html("less");
} else {
expand.html("more");
}
expand.fadeIn(500);
});

Pracovné husle s prechodmi tu.

---

1 pre odpoveď č. 2

LIVE DEMO

  $(".faqtitle").click(function(){
var io = this.io^=1;    // Toggler stored directly into the this object
$(this)
.next("p").animate({height: "toggle",opacity: "toggle"}, 400)
.end().find("span").text( io?"less":"more" );
});

.end() Metóda vráti selektor na prvok, na ktorý ste klikli, potom nájde "rozpätie" detí a pomocou a Podmienený operátor (? :) nastaví text v závislosti na boolovskej hodnote, ktorú nastavíme pomocou ^=1 (^AKA Bitwise XOR Operator) na internete var io. Boolovská hodnota kliknutého tlačidla je uložená dosť škaredo priamo vo vnútri vlastnosti io z this (prvok) Objekt (this.io). Môže sa teda získať neskôr.

Takže na vysvetlenie .text( io?"less":"more" );
io ukladá 1/0, s vedomím toho 1 vo vnútri Podmienky (tu používame ?:) vyhodnotí v Booleovskom jazyku true hovoríme:

condition ? "use this if true" : "use that if false".

---

0 pre odpoveď č. 3

Môžete to ľahko urobiť .toggle()

$(".faqtitle").click(function () {
$(this).next("p").toggle();
});

Tu je a JSFiddle demonštrovať.

---

0 pre odpoveď č. 4

Skúste to. Ternárni operátori sú zábavní.

      $(".faqtitle span").text() == "more" ? $(".faqtitle span").text("less") : $(".faqtitle span").text("more");

---