jquery append et retirer cette

Question

J'aime avoir un titre h3 avec un peu caracter qui disent « me expand »

il ressemblera que: catégorie xyz [+]

j'aime une fonction jquery pour chager/enlever le + à moins quand cliquez sur .. je sais comment ajouter du texte à la chaîne mais pas comment l'enlever ou juste une partie ..

si vous avez une meilleure approche n'hésitez pas à me dire .. merci !

---

Note: mettre en œuvre la fonction .remplace ... mais ne fonctionnent pas comme prévu you can see it here ... le problème i utilisé jquery 1.4 passage à 1.4.3 maintenant ça marche!

Answer 1

Eh bien, si vous doit avez le +/- dans le même h3 que le reste du texte d'en-tête, je le ferais avec un regex remplacer. Voici comment je le ferais alors:

$("body").delegate("#header a", "click", function(eventObj) { 
    if ($(this).text().match(/\+/)) { 
     $(this).text($(this).text().replace(/\+/, "-")); 
    } else { 
     $(this).text($(this).text().replace(/-/, "+")); 
    } 
}); 

Vous pouvez le voir travailler sur au jsFiddle.

Answer 2

$ ("# idOfObject"). Html ("[-]");

ne me tirez pas si je me trompe, en passant par la mémoire :)

Answer 3

Vous pouvez utiliser les fonctions html ou texte jQuery pour y parvenir:

$("#your-selector").text("category xyz[-]"); 

Answer 4

Mettre le petit personnage dans son très propre <span>, et donner à cette <span> une valeur "class" ou "id". Ensuite, vous pouvez utiliser la classe ou l'id de Javascript pour trouver cette partie du texte spécifiquement et la changer. Cela aura l'avantage supplémentaire de faire ce petit bout de texte, si insignifiant parmi le reste du contenu de votre page, tout béat et hautain dans son intelligibilité linguistique, bien que ce petit personnage ne sera que spécial . Sa qualité de vie sera considérablement améliorée, et ce genre de chose arrive vraiment à un niveau subliminal pour vos utilisateurs.

Answer 5

mettre les personnages dans une enjambe quelque chose comme

<span class=expandPlus>[+]</span> 

alors vous pouvez utiliser quelque chose comme

$("h3").click(function() { 
    $(this).children('expandPlus').html('[-]') 
    . 
    . 
    . 
}); 

Answer 6

Il est beaucoup plus facile de basculer la visibilité des éléments existants.

HTML

<h3>Category XYZ 
    <span id="toggle"> 
     <a href="#" class="expand" title="expand me">[+]</a> 
     <a href="#" class="hide" title="hide me">[-]</a> 
    </span> 
</h3> 
<div id="toggleContent">This is the text of category XYZ</div> 

Javascript

$("span#toggle a").click(function() { 
    $("div#toggleContent").toggle(); 
    $("span#toggle a").toggle(); 
}); 

CSS

div#toggleContent { display: none; } 
span#toggle a.hide { display: none; } 

JSFiddle que vous pouvez essayer.

Answer 7

Si vous voulez/déplier Je vous suggère de ne faire une structure similaire à celle-ci:

See this example on jsFiddle.

Chaque a est liée à un div. Le href est le sélecteur pour le contenu div.

<div id="container"> 
    <ul> 
     <li>Category 01 <a href="#cat01">[+]</a></li> 
     <li>Category 02 <a href="#cat02">[+]</a></li> 
     <li>Category 03 <a href="#cat03">[+]</a></li> 
    </ul> 
    <br /> 
    <div id="categories"> 
     <div id="cat01">content 01</div> 
     <div id="cat02">content 02</div> 
     <div id="cat03">content 03</div> 
    </div> 
</div> 

J'utilise ici toggle, chaque fois que vous cliquez sur l'élément l'indice de la fonction augmente de 1 jusqu'à atteindre le maximum, il retourne à 0. Donc, avec deux fonctions, il alterne entre eux dans chaque Cliquez sur. Ce faisant, vous pouvez basculer entre [-] et [+]. Cela ne fonctionnera correctement que si toutes les catégories commencent avec le même état. Si elles ne sont pas nécessairement effondrées lors de la première exécution, vous devrez modifier cette fonction pour vérifier le contenu a pour [+] ou [-].

$("#container ul > li > a").toggle(function (e) { 
    var $this = $(this); 
    $this.text("[-]"); // change the text 
    // select content div using href as the selector 
    $($this.attr("href")).css("display", "block"); 
    // prevent any other behavior 
    e.preventDefault(); 
}, 
function (e) { 
    var $this = $(this); 
    $(this).text("[+]"); // switch to collapsed view 
    $($this.attr("href")).css("display", null); 
    e.preventDefault(); 
});