我试图点击“添加”，第一次将出现“添加”的内容。
添加后，我想点击“添加”，它只会切换“已添加”，而不是在每次点击时都添加“已添加”。
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>
这里有一个Fiddle：http://jsfiddle.net/Abgec/
$(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();
}
});
});
.toggle() 的文档链接：http://api.jquery.com/toggle/
我推荐一种不同的方法，即在第一次触发点击事件后替换它。
$(function(){
var NewContent='<div class="added">Added</div>'
$(".add").one('click', function(){
var $content = $(NewContent).insertAfter('#spin');
$(this).click(function(){
$content.toggle();
});
});
});
可能有更优雅的方法，但这个也可以。
$(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/
编辑：我发帖时还没有任何回复，我保证。
选项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);
});
});
这里是一个可工作的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;
}
这里是一个可运行的fiddle。
通过在开头创建并隐藏“added”div，您可以简化很多内容。
CSS：
#spin {display: none;}
HTML：
<span class="add">add</span>
<span id="spin">Added</span>
jQuery：
$(function(){
$(".add").click(function(){
$("#spin").toggle();
});
});
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));});
});
我尝试了许多答案，但是没有找到我要找的相同的答案，但某些答案帮助我实现了我的目标。所以我分享一下我所做的事情，也许可以帮助需要完成工作代码的人...
*** 点击“item”以切换
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'> <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'> <input type='text'><br><br><input type='text'> <input type='text'></p><br>
</div>
</div><br><br>
<button id="our-button"> Add new item</button>你仍然需要清理这段代码，我只是放了一个粗略的版本。
你所需要做的就是切换显示CSS属性。如果当前为none，你可以将其更改为任何你想要的显示样式。如果当前不是none，你可以将其更改为none。