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

我试图单击添加，添加的内容将首次出现。在点击后添加div，然后在每次点击之后切换它
它的加入后，我要点击添加，它只会切换 “补充”，而不是增加 “补充说：” 每次点击

的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/

来源

2012-02-21 Wonka

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

来源

2012-02-21 20:54:11 Jasper

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

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

CSS

.added { 
    display:none; 
}

这里的a working fiddle。

来源

2012-02-21 20:56:48

所有你需要做的就是切换显示CSS属性。如果它目前没有，则将其更改为您想要的任何显示样式。如果它目前是非无的东西，则将其更改为无。

来源

2012-02-21 20:57:08 Edward

您可以通过在开始时创建和隐藏“添加”div权限来简化很多操作。

CSS：

#spin {display: none;}

HTML：

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

的jQuery：

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

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

来源

2012-02-21 20:57:27

我有点不同的方法，取代了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/

来源

2012-02-21 20:58:39 Andrew

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

来源

2012-02-21 21:02:14

有可能是一个更优雅的方式，但这种作品。

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

编辑：当我写这个没有答案，我发誓

来源

2012-02-21 21:06:30 akiller

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

回答

相关问题