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>

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

1 个答案: