点击添加div,然后在每次点击后切换它

Question

1. 我正在尝试点击添加,添加的内容将首次出现.

2. 添加之后,我想点击添加,它只会切换"添加",而不是在每次点击时添加"添加"

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>

这是一个小提琴:http://jsfiddle.net/Abgec/

Answer 1

$(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();
        }
    });
});

这是一个演示:http://jsfiddle.net/7yU3n/

文档.toggle():http://api.jquery.com/toggle/