jQuery-动态按钮，我可以清理吗？

Question

我创建了一个按钮（将根据我老板的请求）随机出现在屏幕上，单击该按钮将打开一封电子邮件以提供反馈。

我的目标是使此脚本能够执行所有操作，主要是因为我不必访问每个网站的ASP标记或CSS文件。 只需将脚本放在标题中，然后将图像放在文件夹中即可。

我将脚本创建为：

• 创建一个包含按钮的div
• 设置该div元素的CSS（某些文本旁边会有一个小图像）
• 随机显示给用户

我想出的脚本可以正常工作，但是，我想知道是否仍然可以清理所有脚本。 （对于编写自己的Jquery脚本，我是一种新手，我正在尝试学习如何尽可能地井井有条。）

jQuery：

$(function () {

    var fbContainer = $('<div id="feedback"><img src="image.gif" /> <a href="mailto:feedback@mywebaddress.com">Feedback</a></div>')
    .css({
        'display': 'none',
    });

    $('#header').append(fbContainer);

    $('#feedback a').css({
        'font-family': 'arial',
        'float': 'left',
        'text-decoration': 'none',
        'color':'#000000'
    });

    $('#feedback img').css({
        'float': 'left',
        'margin': '3px 5px 0 0';
    });

    var randofactor = .5;
    var randomizer = Math.random();

    if (randomizer < randofactor) {
       fbContainer.css('display', 'block');
    }

});

感谢您的协助

Answer 1

您可以尝试将代码封装在javascript对象中，建议将其放在单独的文件中。 我建议将放置按钮的标题移动到构造函数中以进行参数化，以便您可以在其他地方重用它。

将对象创建和样式等各个逻辑部分分离为各自的功能也有助于提高代码的可读性。

<script type="text/javascript">
    var randomFeedBackButton = {
        getfbContainer: function (header,feedBackAddress) {
            var fbContainer = $('<div id="feedback"><img src="image.gif" /> <a href=' + feedBackAddress + '>Feedback</a></div>')
                .css({
                    'display': 'none'
                });

                header.append(fbContainer);

            return fbContainer;
        },
        generateCss: function () {
            $('#feedback a').css({
                'font-family': 'arial',
                'float': 'left',
                'text-decoration': 'none',
                'color': '#000000'
            });

            $('#feedback img').css({
                'float': 'left',
                'margin': '3px 5px 0 0'
            });
        },
        initialize: function (header) {

            var container = this.getfbContainer(header, "mailto:feedback@mywebaddress.com");

            this.generateCss();

            var randofactor = .5;
            var randomizer = Math.random();

            if (randomizer < randofactor) {
                container.css('display', 'block');
            }
        }
    };
    $(function () {

        randomFeedBackButton.initialize($('#header')); /*call your script*/

    });
</script>