请看一下我的初学者javaScript

我的工作分为四个主要部分：

当类别链接悬停时，不在该类别中的项目将变暗（这似乎工作正常）

单击类别链接时，不在此类别中的项目将被隐藏（似乎也可以）

检测到浏览器窗口大小，并选择适合的样式表。即，对于较旧的屏幕或手机。继续并调整浏览器窗口的大小

当浏览器窗口变窄时，会有一个额外的脚本向下滚动到“main”div

所有项目
平面设计
徽标设计
摄影术
web开发
网页设计

此类别中有x个项目
未选择任何类别
未单击任何类别
平面设计

标志设计
平面设计

等

接下来是javascript。对不起，如果有点长。我希望它应该足够容易阅读

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>
$(document).ready(function(){
    var xwidth =$(window).width();//get width of user window
    all_projects_showing_text="All projects showing. There are " + n + " projects, in " + t + " categories.";
    adjustStyle(xwidth);
    $("p.items").text(all_projects_showing_text + " Width=" + xwidth);
    $(".all").addClass("selected");
    tag="all"
});
</script>

    <script>
var n = $("section").length;//number of section boxes on page
var t = $("#tag-selector li").length;//categories
t--;

 $("#tag-selector li").click(function() {//clicking section filter li
    $("#tag-selector li").removeClass("selected");//removes all filtered class
    $(this).addClass("selected");//then adds it to the chosen link (li), showing it as current
    tag=$(this).attr("class");//var tag is the class name of the chosen link, i.e. category
    var split = tag.split(' '); // this splits the class string and puts each item in an array
    tag = split[0];//this chooses the first item of the array, hence not including the hilite class
    var numItems = $('.'+tag).length
    var numItems=numItems-1;//correct for real number

    if (tag!="all"){//if the all link is not picked
    $("section").hide();// hide all the boxes
    $("#main ."+tag).fadeIn();//show all the boxes with the tag class
        if(tag=="graphic-design"){
          tag="Graphic design"
        }
        else if(tag=="logo-design"){
          tag="Logo design"
        }
        else if(tag=="photography"){
          tag="Photography"
        }
        else if(tag=="web-development"){
          tag="Web development"
        }
        else if(tag=="web-design"){
          tag="Web design"
        }

        $("p.items").text(numItems+" " +tag+ " projects");
        $("p.selected").text(tag +" selected.");
        $("p.clicked").text(tag +" selected.");
    }
    else{
      $("section").fadeIn();//else show all the boxes
      $("p.items").text(all_projects_showing_text);// all_projects_showing_text at onReady 
    }       
});
</script>

    <script>
  $("#tag-selector li").hover(function () {

    hovered_link=$(this).attr("class");//get the class of the category being hovered
    var split = hovered_link.split(' '); // this returns an array
    hovered_link = split[0];//remove any other classes apart from the first i.e. remove hilite

    if (tag=="all"){// if All are shown
        if(hovered_link!="all"){
          $("section").not("."+hovered_link).addClass("section_darkened");//darken section which does not correspond with hovered category link
          $("section").not(".section_darkened").addClass("outerglow");//add glow to not darkened sections
        }
    }
    else{
    }
    if (tag==hovered_link){// if the projects are already filtered by this category, say so on hover
        $("p.selected").text(tag +" already selected.");
    }
    else{
        var numItems = $('.'+hovered_link).length
        var numItems=numItems-1;//correct for real number
        $("p.selected").text("Click to see only "+hovered_link+ " projects. (" +numItems+ " projects)" );
    }

    $(this).addClass("hilite");//hilite on hover over link
    }, function () {
      $(this).removeClass("hilite");
      $("p.selected").text("...");
      $("section").removeClass("section_darkened");//darken categories not in the selected category
      $("section").removeClass("outerglow");//give the selected category items a glow
    });
</script>

<script>
$(function() {
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 600) {
        $("#tag-selector li").click(function() {// SCroll function for handhelds
        $('html,body').animate({
                scrollTop: $("#main").offset().top},
                'slow');
        });
        $("#size-stylesheet").attr("href", "css/nav-style-narrow.css");//style sheet for handhelds
    } else if ((width >= 440)&&(width < 1040)){
      $("#size-stylesheet").attr("href", "css/nav-style-med.css");
    } else {
      $("#size-stylesheet").attr("href", "css/nav-style-wide.css");
    }
}
</script>

$（文档）.ready（函数（）{
var xwidth=$（window.width（）；//获取用户窗口的宽度
所有项目\u显示\u text=“所有项目显示。有“+n+”个项目，在“+t+”类别中。”；
调整样式（xwidth）；
$（“p.items”）.text（所有显示文本+“Width=”+xwidth的项目）；
$（“.all”）.addClass（“选定”）；
tag=“全部”
});
变量n=$（“节”）。长度//第页上的节框数
var t=$（“#标记选择器li”）.length//类别
t--；
$（“#标记选择器li”）。单击（函数（）{//单击节筛选器li
$（“#标记选择器li”）.removeClass（“selected”）；//删除所有筛选的类
$（this）.addClass（“selected”）；//然后将其添加到所选链接（li），显示为当前链接
tag=$（this）.attr（“class”）；//var tag是所选链接的类名，即category
var split=tag.split（“”）；//这将拆分类字符串并将每个项放入数组中
tag=split[0]；//选择数组的第一项，因此不包括hilite类
变量numItems=$（'.'+标记）.length
var numItems=numItems-1；//实数正确
如果（标记！=“all”）{//如果未拾取all链接
$（“section”）.hide（）；//隐藏所有框
$（“#main.+tag）.fadeIn（）；//显示带有tag类的所有框
如果（标签==“平面设计”）{
tag=“图形设计”
}
else if（标签==“标志设计”）{
tag=“徽标设计”
}
否则如果（标签=“摄影”）{
tag=“摄影”
}
else if（标记==“web开发”）{
tag=“Web开发”
}
else if（标记==“网页设计”）{
tag=“网页设计”
}
$（“p.items”）.text（numItems+“”+tag+“projects”）；
$（“p.selected”）.text（标记+“selected”）；
$（“p.clicked”）.text（标记+“选定”）；
}
否则{
$（“section”）.fadeIn（）；//否则显示所有框
$（“p.items”）.text（所有项目显示文本）；//所有项目显示onReady上的文本
}       
});
$（“#标记选择器li”）.hover（函数（）{
hovered_link=$（this）.attr（“class”）；//获取悬停类别的类
var split=hovered_link.split（“”）；//返回一个数组
悬停的_link=split[0]；//删除除第一个类之外的任何其他类，即删除hilite
if（tag==“all”）{//if全部显示
如果（悬停链接！=“全部”）{
$（“section”）.not（“.”+悬停的_链接）.addClass（“section_变暗”）；//变暗与悬停的类别链接不对应的部分
$（“section”）.not（“.section_Daked”）.addClass（“outerglow”）；//将辉光添加到未变暗的部分
}
}
否则{
}
如果（tag==hovered\u link）{//如果项目已经被这个类别过滤了，那么在hover上说是这样
$（“p.selected”）.text（标记+“已选定”）；
}
否则{
var numItems=$（'..+悬停链接）.length
var numItems=numItems-1；//实数正确
$（“p.selected”）.text（“单击仅查看“+悬停链接+”项目。（“+numItems+”项目）”）；
}
$（this.addClass（“hilite”）；//将hilite悬停在链接上
}，函数（）{
$（此）.removeClass（“hilite”）；
$（“p.selected”）.text（“…”）；
$（“section”）.removeClass（“section_Darked”）；//使不在所选类别中的类别变暗
$（“section”）.removeClass（“outerglow”）；//为所选类别项提供一个辉光
});
$（函数（）{
$（窗口）。调整大小（函数（）{
adjustStyle（$（this）.width（））；
});
});
功能调整样式（宽度）{
宽度=parseInt（宽度）；
如果（宽度<600）{
$（“#标记选择器li”）。单击（函数（）{//用于手持设备的滚动函数
$（'html，body'）。设置动画({
scrollTop:$（“#main”）.offset（）.top}，
“慢”）；
});
$（“#size stylesheet”）.attr（“href”，“css/nav style shown.css”）；//手持设备的样式表
}否则，如果（（宽度>=440）和&（宽度<1040））{
$（“#大小样式表”）.attr（“href”，“css/nav-style-med.css”）；
}否则{
$（“#大小样式表”）.attr（“href”，“css/nav style-wide.css”）；
}
}

如果你已经走了这么远，看看，谢谢

所以我的问题是,

我是不是错过了《密码》的突破在我的循环中的任何地方？不太确定如何使用break

当我的CSS文件被选中时，在第一个样式改变之前会有一个闪光。有没有办法避免这种情况

当浏览器处于最窄的样式表时，我单击我的链接，之后我无法再次向上滚动。救命？！：-）

是否有任何明显的错误或遗漏会让这变得更容易

我开始觉得我的一页上有很多脚本。也许我应该把它放在一个单独的fi中

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>
$(document).ready(function(){
    var xwidth =$(window).width();//get width of user window
    all_projects_showing_text="All projects showing. There are " + n + " projects, in " + t + " categories.";
    adjustStyle(xwidth);
    $("p.items").text(all_projects_showing_text + " Width=" + xwidth);
    $(".all").addClass("selected");
    tag="all"
});
</script>

    <script>
var n = $("section").length;//number of section boxes on page
var t = $("#tag-selector li").length;//categories
t--;

 $("#tag-selector li").click(function() {//clicking section filter li
    $("#tag-selector li").removeClass("selected");//removes all filtered class
    $(this).addClass("selected");//then adds it to the chosen link (li), showing it as current
    tag=$(this).attr("class");//var tag is the class name of the chosen link, i.e. category
    var split = tag.split(' '); // this splits the class string and puts each item in an array
    tag = split[0];//this chooses the first item of the array, hence not including the hilite class
    var numItems = $('.'+tag).length
    var numItems=numItems-1;//correct for real number

    if (tag!="all"){//if the all link is not picked
    $("section").hide();// hide all the boxes
    $("#main ."+tag).fadeIn();//show all the boxes with the tag class
        if(tag=="graphic-design"){
          tag="Graphic design"
        }
        else if(tag=="logo-design"){
          tag="Logo design"
        }
        else if(tag=="photography"){
          tag="Photography"
        }
        else if(tag=="web-development"){
          tag="Web development"
        }
        else if(tag=="web-design"){
          tag="Web design"
        }

        $("p.items").text(numItems+" " +tag+ " projects");
        $("p.selected").text(tag +" selected.");
        $("p.clicked").text(tag +" selected.");
    }
    else{
      $("section").fadeIn();//else show all the boxes
      $("p.items").text(all_projects_showing_text);// all_projects_showing_text at onReady 
    }       
});
</script>

    <script>
  $("#tag-selector li").hover(function () {

    hovered_link=$(this).attr("class");//get the class of the category being hovered
    var split = hovered_link.split(' '); // this returns an array
    hovered_link = split[0];//remove any other classes apart from the first i.e. remove hilite

    if (tag=="all"){// if All are shown
        if(hovered_link!="all"){
          $("section").not("."+hovered_link).addClass("section_darkened");//darken section which does not correspond with hovered category link
          $("section").not(".section_darkened").addClass("outerglow");//add glow to not darkened sections
        }
    }
    else{
    }
    if (tag==hovered_link){// if the projects are already filtered by this category, say so on hover
        $("p.selected").text(tag +" already selected.");
    }
    else{
        var numItems = $('.'+hovered_link).length
        var numItems=numItems-1;//correct for real number
        $("p.selected").text("Click to see only "+hovered_link+ " projects. (" +numItems+ " projects)" );
    }

    $(this).addClass("hilite");//hilite on hover over link
    }, function () {
      $(this).removeClass("hilite");
      $("p.selected").text("...");
      $("section").removeClass("section_darkened");//darken categories not in the selected category
      $("section").removeClass("outerglow");//give the selected category items a glow
    });
</script>

<script>
$(function() {
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 600) {
        $("#tag-selector li").click(function() {// SCroll function for handhelds
        $('html,body').animate({
                scrollTop: $("#main").offset().top},
                'slow');
        });
        $("#size-stylesheet").attr("href", "css/nav-style-narrow.css");//style sheet for handhelds
    } else if ((width >= 440)&&(width < 1040)){
      $("#size-stylesheet").attr("href", "css/nav-style-med.css");
    } else {
      $("#size-stylesheet").attr("href", "css/nav-style-wide.css");
    }
}
</script>

$("section").removeClass("section_darkened");
$("section").removeClass("outerglow");

var $section = $section;
$section.removeClass("section_darkened");
$section.removeClass("outerglow");

$("section")
    .removeClass("section_darkened")
    .removeClass("outerglow");

$("section")
    .removeClass("section_darkened outerglow");

var tagTitles = {
    "graphic-design":"Graphic design",
    "logo-design":"Logo design",
    // etc
};
tag = tagTitles[tag];