Добавьте 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/

Answer 2

У меня немного другой подход, заменив событие click после его первого срабатывания,

$(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/

Answer 3

Может быть более элегантный способ, но это работает.

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

Fiddle: http://jsfiddle.net/HVSm3/

edit: когда я писал это, ответов не было, я клянусь

Answer 4

Я перепробовал много ответов, но не смог найти то же самое, что искал, но некоторые ответы помогли мне достичь своей цели. Так что я делюсь тем, что я сделал, может быть, это поможет кому-то, кто хочет завершить рабочий код ..

*** нажмите на "пункт", чтобы переключить

var newItemCounter = 1;
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById("our-button");

ourList.addEventListener("click", activateItem);

function activateItem(e){
        $(e.target).children("p").toggle(400);
}

ourButton.addEventListener("click", createNewItem)

function createNewItem(){
        ourList.innerHTML+= "<input class='fl-right' type='text'>&nbsp;&nbsp;<input class='fl-right' type='text'><div class='fl-right'>item " + newItemCounter +"<br><p><input type='text'> <input type='text'><br><br><input type='text'> <input type='text'></p><br></div>";
        newItemCounter++;
}

 div p{
  display: none;
  }
  #our-list ul.child-list li{
  float: left;
  }
  .fl-right{
        display: inline;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="our-list">
  <input class='fl-right' type='text'>
  <input class='fl-right' type='text'>
  <div class='fl-right'> item<br>
  <p><input type='text'>&nbsp;&nbsp;<input type='text'><br><br><input type='text'>&nbsp;&nbsp;<input type='text'></p><br>
  </div>
  </div><br><br>
   <button id="our-button"> Add new item</button>

все же вы должны очистить этот код, я поставил грубый код

Answer 5

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

Answer 6

Вы можете многое упростить, создавая и скрывая «добавленный» div в самом начале.

CSS:

#spin {display: none;}

HTML:

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

JQuery:

$(function(){
    $(".add").click(function(){
        $("#spin").toggle();
    });
});

Другими словами, вместо того, чтобы динамически создавать «Добавленный» и затем переключать видимость, просто переключайте видимость (начиная с невидимого состояния).

Answer 7

Все, что вам нужно сделать, это переключить свойство display css. Если в данный момент его нет, вы меняете его на любой стиль отображения. Если в данный момент это что-то отличное от none, вы меняете его на none.

Answer 8

Опция 1

Это будет работать (см. Комментарии JS):

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

Вот рабочая скрипка .

Вариант 2

Если NewContent не требует динамической работы, это более чистое решение:

HTML

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

JS

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

CSS

.added {
    display:none;
}​

Вот рабочая скрипка .