将所有 javascript 函数重新组合为一个

Question

如何将所有这些 javascript 函数重新组合为一个，

而不是有很多 <script type="text/javascript"></script>

我只想要一个可以找到我所有功能的地方。

这里是所有函数：

<script type="text/javascript">
function openNav()  { document.getElementById("myNav").style.cssText = "height:100%"; document.body.style.overflow = "hidden";}
function closeNav() { document.getElementById("myNav").style.cssText = "height:0%";  document.body.style.overflow = "scroll";}
</script>   

<script type="text/javascript">
$(document).ready(function(){    
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();    
if(scrolltop >= 1150) {
$('#fixedbar').fadeIn(100);
}    
else if(scrolltop <= 1150) {
$('#fixedbar').fadeOut(100);
}
});
});
</script>    

<script type="text/javascript">
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>

<script type="text/javascript">
$("#voirmoins").on("click", function() {
$(this).toggleClass("on");
});
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>

这是我想要的：

<script type="text/javascript">
function openNav()  { document.getElementById("myNav").style.cssText = "height:100%"; document.body.style.overflow = "hidden";}
function closeNav() { document.getElementById("myNav").style.cssText = "height:0%";  document.body.style.overflow = "scroll";}    

$(document).ready(function(){
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 1150) {
$('#fixedbar').fadeIn(100);
} 
else if(scrolltop <= 1150) {
$('#fixedbar').fadeOut(100);
}
});
});

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});

$("#voirmoins").on("click", function() {
$(this).toggleClass("on");
});
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>

Answer 1

有多种工具可以让您检查 JavaScript 代码的语法。最常见的是 "lints"，谷歌搜索 javascript lint 肯定会帮助你。

现在要快速检查代码的语法正确性，请在 google chrome 中按 F12 打开开发人员控制台，将您的 js 代码粘贴到此处并按回车，它应该会告诉您是否有任何语法错误。

您有两个 $(document).ready(...) 语句。

在这里，把这个放在你的脚本括号中：

function openNav()  {
    document.getElementById("myNav").style.cssText = "height:100%";
    document.body.style.overflow = "hidden";
}
function closeNav() {
    document.getElementById("myNav").style.cssText = "height:0%";
    document.body.style.overflow = "scroll";
}

$(document).ready(function(){
    $(window).on('scroll',function() {
        var scrolltop = $(this).scrollTop();
        if(scrolltop >= 1150) {
            $('#fixedbar').fadeIn(100);
        }
        else if(scrolltop <= 1150) {
            $('#fixedbar').fadeOut(100);
        }
    });

    $(".flip").click(function(){
        $(".panel").slideToggle("fast");
    });
});

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

$("#voirmoins").on("click", function() {
    $(this).toggleClass("on");
});

将所有 javascript 函数重新组合为一个

Regroup all the javascript function in one

javascript

jquery

html

function

document-ready