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

2024-01-08

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击时添加 div,然后在每次单击时切换它 的相关文章

随机推荐

  • 为所有页面生成本地资源

    有什么方法或技巧可以自动为 Visual Studio 2010 中的所有页面生成本地资源吗 我有大约 500 个页面和用户控件 很难为每个页面逐一生成资源 有任何附加组件或扩展吗 沙欣 写个剧本行不行 资源文件只不过是一个 XML 文件
  • 错误:您必须至少安装一个 postgresql-client- 软件包

    我正在尝试在 Ubuntu 中安装 PostgreSQL 我按照以下指示进行操作 opt PostgreSQL 9 0 doc postgresql html installation html 似乎已成功安装 PostgreSQL 但作为
  • 无法开始在 iOS 中接收远程控制事件

    在我的应用程序中 我想让用户控制后台音频播放 我在 plist 中设置了背景模式 并在背景中设置了播放模式 就像我想要的那样 但是我无法通过触摸控制按钮得到任何响应 我设置了AudioSession像这样 AVAudioSession sh
  • 如何将RapidJSON文档序列化为字符串?

    如何将RapidJSON文档序列化为字符串 在所有示例中 序列化文本通过以下方式重定向到标准输出 FileStream 但我需要将其重定向到字符串变量 In the 项目的第一页 http rapidjson org 代码已经展示了如何将文
  • 如何更新旧的 Android 项目以适应新的 Android SDK 工具的更新?

    以前我使用的是旧版本Android SDK工具 http developer android com sdk tools notes html 现在我搬到了一台新电脑 从头开始设置我的新开发环境 并从以前的电脑复制并导入项目 现在 如果我在
  • JMX 和 RMI 的区别

    JMX 的目的是什么以及它的用途是什么 我一直在浏览 JMX 上的一些教程 它们所做的就是注册一些 Mbean 并从 jconsole 调用这些 Mbean 如果这就是它的目的 那么 JMX 和 RMI 远程过程调用 之间有什么区别 提前致
  • 如何使用 VBA 将样式应用于 Word 中的多个选择?

    我创建了一个宏 它将特定的样式应用于文档中选择的任何内容 但是 在草稿视图中 当用户在样式区域窗格中单击以选择一个段落 然后按住 Ctrl 键并单击其他段落时 运行此宏时不会应用此附加选择 Sub BodyTextApply Selecti
  • 在单元测试中伪造我的数据库层的方法是什么?

    我有一个关于单元测试的问题 假设我有一个带有一个创建方法的控制器 该方法将新客户放入数据库中 code a bit shortened public actionresult Create Formcollection formcollec
  • 如何使用 javascript 将 json 数据写入 google 工作表

    我正在尝试使用 javascript 将 json 数据渲染到 google 工作表 我尝试搜索大量文档 并且已经尝试了几个小时 我确实在工作表中输入了一行数据 但我需要在正确的行和列中渲染整个 json 数据集 function rend
  • 如何在Spring字符串到数组或列表转换中转义“,”(逗号)

    我们有一个 Spring 绑定 它将字符串转换为Lists 使用 Spring 提供的默认转换器 例如 如果我们有a b c从表单推送然后控制器得到一个List与元素 a b c 我们不需要在代码中做任何特殊的事情 我在处理数据中的逗号时遇
  • 自动点击弹出按钮

    我有以下按钮突然出现在窗口上 span class a b c Accept Waiting Chat span 是否可以拦截它并自动点击它 我正在考虑 JS 或 Greymonkey 扩展中的一些东西 Ideas None
  • 阻止直接访问文件,但允许通过 jquerys 加载函数访问

    我在用着jQuery通过它向用户显示某个页面 load 功能 我这样做是为了允许用户自定义网站 让他们能够满足自己的需求 目前 我正在尝试显示该文件feed php容器内部main php 我遇到一个问题 我想阻止直接访问文件 即 直接进入
  • 使用 MSBuild 4.0 记录构建消息

    我在代码中使用 MsBuild 4 0 如下所示 var globalProperties new Dictionary
  • 使用 Python BeautifulSoup 库解析 Span HTML 标签中的信息

    我正在编写一个 Python 网络抓取工具 用于获取特定股票的价格 在我的程序末尾 有一些打印语句可以正确解析 html 数据 以便我可以在某个 HTML span 标记内获取股票的价格信息 我的问题是 我该怎么做 我已经获得了正确的 HT
  • 无法强制 clang CompilerInstance 对象将标头解析为 C++ 文件

    我有一个名为的 C 标头class h我想解析 class MyClass public Class Class bool isTrue const bool isFalse const private bool m attrib bool
  • WebStorm IDE 的高效使用

    我最近爱上了 WebStorm 作为 JavaScript 开发的 IDE 问题是 我来自 vim 和轻量级编辑器的世界 所以我可能无法完全理解 IDE 带来的所有功能 是的 我已经看过演示文稿并阅读了文档 但是有很多功能 我不确定其中哪些
  • 在 ggplot 中制作多个几何图形动画

    我正在尝试制作一个动画情节 展示 NBA 球队的三分出手率和助攻率如何随时间变化 虽然图中的点正确过渡 但我尝试添加垂直和水平平均线 但是总体平均值保持不变 而不是逐年变化 p lt ggplot dataBREFPerPossTeams
  • EF 4.3 迁移 - 如何生成降级脚本?

    我有一个问题 在网络上找不到答案 我正在使用带有 SQL 的 Code First EF 4 3 1 迁移 我添加了几个迁移 现在我想生成一个用于在两个迁移之间升级 降级的脚本 对于升级 我运行以下命令 成功重现升级脚本 PM gt Upd
  • 我什么时候在哪里以及如何更改对象的 __class__ 属性?

    我希望能够做到 gt gt gt class a str pass gt gt gt b a gt gt gt b class str Traceback most recent call last File
  • 单击时添加 div,然后在每次单击时切换它

    我尝试点击添加 添加的内容将第一次出现 添加后 我想单击 添加 它只会切换 已添加 而不是每次单击时添加 已添加 Jquery function var NewContent div class added Added div add cl