Question

我正在尝试点击添加，首次显示添加内容。
添加之后，我想点击添加，它只会切换“已添加”，而不是在每次点击时添加“已添加”

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

我采用了一些不同的方法，在第一次触发后替换了点击事件，

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

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

这是a working fiddle。

选项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;
}

这是a working fiddle。

Answer 4

您需要做的就是切换display css属性。如果它当前为none，则将其更改为您想要的任何显示样式。如果它当前不是无，则将其更改为无。

Answer 5

你可以通过在开头创建和隐藏“添加”div来简化很多。

CSS：

#spin {display: none;}

HTML：

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

jQuery的：

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

换句话说，不是动态创建“已添加”然后切换可见性，而只是切换可见性（从不可见状态开始）。

Answer 6

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 7

可能有更优雅的方式，但这很有效。

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

小提琴：http://jsfiddle.net/HVSm3/

编辑：当我写这篇文章时，我发誓没有答案

Answer 8

我尝试了许多答案，但我找不到我想要的答案，但有些答案帮助我实现了目标。所以我正在分享我所做的事情，可能会帮助那些想要完成工作代码的人......

***点击“项目”切换

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>

仍然你必须清理这段代码，我把粗略的代码

单击时添加div，然后在每次单击后切换它

8 个答案: