jquery - 如何在 jQuery 中仅当 div 为空时才附加 html？

Question

我有这个代码用于在我的 PHP 文件中显示登录和注册的内容:

<?php // LOGIN PART ?>
<div class="login-part"></div>

<?php // REGISTRATION PART ?>
<div class="registration-part"></div>

这在我的 js 文件中:

$(document).ready( function() {
            // FOR REGISTRATION
            $('span.logreg.reg').click(function () {

                $('div.registration-part').append('<p>Registration</p>');
            });

            // FOR LOGIN
            $('span.logreg.log').click(function () {

                // insert html
                $('div.login-part').append('<p>Login</p>');
            });
        });

现在，每次我单击某个范围时，它都会根据单击的范围显示文本登录或注册。

没关系，但是我只需要添加一次，因此当用户在范围上单击更多次时，它将不会添加更多文本。

据我所知，Remove() 或empty() 不是一个选项，因为我需要输入框中的信息(稍后会有用于插入用户信息的输入框)保留在那里，并且如果用户再次意外点击跨度。

但是，如果他单击另一个跨度，它可以删除 div 内的 html。例如。如果span.log处于事件状态，则单击span.log后不会发生任何事情，但如果他单击span.reg，则div.login-part内的html将被删除，并且将出现注册文本。

如何做这样的事情？

Answer 1

请尝试 APi: .one :(阅读您的问题后，您似乎只需要在使用 .one 后附加 HTML，例如 login 即可将解决此问题)

Attach a handler to an event for the elements. The handler is executed at most once per element.

API链接:http://api.jquery.com/one/

这种方式只会根据需要追加一次，并且您不会多次显示重复的 html。

希望这有帮助，如果我错过了什么，请告诉我，

进一步位差异演示:http://jsfiddle.net/avSDa/9/使用适合您的 .is(:empty) 。

代码像这样

  $('span.logreg.log').one('click', function () {

                // insert html
                $('div.registration-part').append('<p>Login</p>');
            });