Ajouter des div sur la souris, puis basculer sur chaque clic après que

Je suis en train de cliquez sur ajouter et le contenu d'ajouter apparaît pour la première fois.
Après il est ajouté, je veux cliquez sur ajouter et il ne bascule "ajouté", au lieu d'ajouter "ajouter" sur chaque clic

Jquery:

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        $("#spin").after(NewContent);
    });
});

HTML:

<span class="add">add</span>
<span id="spin"></span>

Ici un Violon: http://jsfiddle.net/Abgec/

OriginalL'auteur Wonka | 2012-02-21

$(function(){

    //start with `NewContent` being the HTML to add to the page
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){

        //check if `NewContent` is empty or not
        if (NewContent != '') {

            //if `NewContent` is not empty then add it to the DOM
            $("#spin").after(NewContent);

            //now that `NewContent` has been added to the DOM, reset it's value to an empty string so this doesn't happen again
            NewContent = '';
        } else {

            //this is not the first click, so just toggle the appearance of the element that has already been added to the DOM
            //since we injected the element just after the `#spin` element we can select it relatively to that element by using `.next()`
            $('#spin').next().toggle();
        }
    });
});

Voici une démo: http://jsfiddle.net/7yU3n/

Docs pour .toggle(): http://api.jquery.com/toggle/

OriginalL'auteur Jasper

Je peu différente de l'approche, en remplacement de l'événement click après son premier tir,

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").one('click', function(){
        var $content = $(NewContent).insertAfter('#spin');
        $(this).click(function(){
            $content.toggle();
        });
    });
});

http://jsfiddle.net/Abgec/3/

OriginalL'auteur Andrew

0

Tout ce que vous devez faire est de basculer l'affichage d'une propriété css. S'il est actuellement, n', de le modifier à tout style d'affichage que vous souhaitez. Si c'est autre chose que rien du tout, vous le remplacez par aucun.

OriginalL'auteur Edward
0

Vous pouvez simplifier beaucoup de choses par la création et de cacher le "ajouté" div dès le début.

CSS:
```
#spin {display: none;}
```
HTML:
```
<span class="add">add</span>
<span id="spin">Added</span>
```
jQuery:
```
$(function(){
    $(".add").click(function(){
        $("#spin").toggle();
    });
});
```
En d'autres termes, plutôt que de créer dynamiquement ", a Ajouté" et l'activation de la visibilité, juste activer /désactiver la visibilité (en commençant dans un état invisible).

OriginalL'auteur Surreal Dreams

Jquery:

$(function(){
    var NewContent='<div class="added">Added</div>';
    var handleAddItem = function($add) {
        var added = false,
            $spin = $('#spin'), //Suggest using something more relevant to the object getting clicked??
            $content = $(NewContent);
        $add.click(function(){
            if(added){
                added=true;
                $spin.after($content);
            }else{
                $content.toggle();
            }
        }
    };
    $(".add").each(function(){handleAddItem($(this));});
});

OriginalL'auteur Connor Ross

Il peut y avoir une façon plus élégante, mais cela fonctionne.

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        var added= $(".added");
        if (added.length) {
            added.toggle();
        } else {
            $("#spin").after(NewContent);
        }
    });
});

Violon: http://jsfiddle.net/HVSm3/

edit: quand j'ai écrit cela, il n'y avait pas de réponses, je vous jure

OriginalL'auteur akiller

Option 1

Cette volonté de travail (voir JS commentaires):

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        //Check if the div exists, if so simply toggle visibility
        if($(".added").length)
           $(".added").toggle(); 
        else //Not yet added, add the content
            $("#spin").after(NewContent);
    });
});

Voici un travail de violon.

Option 2

Si NewContent n'a pas besoin d'être dynamique, c'est une solution plus propre:

HTML

<span class="add">add</span>
<span id="spin"><div class="added">Added</div></span>

$(function() {
    var NewContent = '<div class="added">Added</div>'
    $(".add").click(function() {
        $(".added").toggle();
    });
});

CSS

.added {
    display:none;
}

Voici un travail de violon.

OriginalL'auteur James Hill

Vous devez vous connecter pour publier un commentaire.