javascript - 请关注我的初学者 javaScript

Question

我正在研究 an interface有四个主要部分:

1. 当类别链接悬停时，不属于该类别的项目变暗(这似乎工作正常)
2. 单击类别链接时，不属于该类别的项目将被隐藏(似乎也可以)
3. 检测浏览器窗口大小并选择适合的样式表。 IE。适用于旧屏幕或手机。继续调整浏览器窗口的大小。

4. 当浏览器窗口变窄时，有一个额外的脚本可以向下滚动到“主”div。

   <div id="container">
   <div id="inner-container">
   <div id="tag-selector">
       <ul>
           <li class="all">ALL PROJECTS</li>
   <li class="graphic-design">graphic design</li>
           <li class="logo-design">logo design</li>
           <li class="photography">photography</li>
           <li class="web-development">web development</li>
           <li class="web-design">web design</li>
       </ul>
   </div> 
   <div id="main" role="main"> 
   <p class="items">There are x items in this category</p>
   <p class="selected">No category selected</p>
   <p class="clicked">No category clicked</p>
       <section class="graphic-design">
           <p>graphic-design</p>
       </section>
       <section class="logo-design graphic-design">
           <p>logo-design</p><p> graphic-design</p>
       </section>
       <section class="logo-design graphic-design"><p>etc</p>
       </section>
   
   </div>
   <footer> </footer>
   

然后这是 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>

如果您已经了解了这里并看过了，谢谢!

所以我的问题是；

1. 我是否在我的循环中遗漏了 break;？不太确定如何使用 break。
2. 当我的 CSS 文件被选中时，第一个样式会在它改变之前闪现。有没有办法避免这种情况？
3. 当浏览器处于最窄的样式表时，我点击了我的链接，之后再次向上滚动时遇到问题。帮助？! :-)
4. 有任何明显的错误或遗漏可以使这一切变得更容易吗？
5. 我开始觉得我的一页上有很多脚本。也许我应该把它放在一个单独的文件中。这会有帮助吗？
6. 是否可以发布多个这样的问题，还是应该单独提出？

提前感谢任何看过的人。

Answer 1

关于break的回答:

break 停止当前循环或 switch 的执行。您应该在循环中使用它，以便在当前迭代结束之前或在循环语句本身未检查的条件下停止循环。您应该在 switch block 中的 case 末尾使用它，以免执行后续的 case。

在您的特定代码中，似乎没有任何循环或 switch，因此任何地方都没有任何 break 的地方。