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代码粘贴到此处并按Enter键，它应该告诉您是否存在语法错误。

您有两个$(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函数重新组合在一起

1 个答案: