如何将jQuery与超文本标记语言分离

Question

我尝试了我能想到的所有组合，但都没有弄明白。下面是我的工作代码(都在HTML文档中)：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $alert = $('.alert');
        if ($alert.length) {
            var alerttimer = window.setTimeout(function () {
                $alert.trigger('click');
            }, 3000);
            $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
                window.clearTimeout(alerttimer);
                $alert.animate({ height: '0' }, 200);
            });
        }
    });
</script>

这就是我的电话：

<div id="alert"><a href="../Home/English">English</a></div>

现在我想要重构，这样脚本就可以放在一个.js文件中。一旦重构，它会是什么样子？谢谢!

Answer 1

只需将您的自定义代码放入.js文件中，将其上传到您的服务器，并在jQuery下引用它核心包括：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>

然后在custom.js文件中放入定制的JS：

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});

更新

我刚刚注意到您的示例HTML有一个ID为alert的元素，而您的JS代码正在搜索类为alert的元素。如果您想以ID为目标，则在前面加上散列(#)，而不是句点：

var $alert = $('.alert');

应更改为：

var $alert = $('#alert');

您可能希望深入了解jQuery选择器(这将为您节省大量时间)：http://api.jquery.com/category/selectors/

Answer 2

它看起来完全一样，除了在一个单独的文件中。假设文件被添加到documentroot /js的子文件夹中

<script type="text/javascript" src="/js/site.js"></script>

site.js

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});

Answer 3

看起来不错你可以这样做

Html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="YourScript.js"></script>

YourScript.js的内容

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});