Question

我正在an interface处理四个主要部分：

当悬挂类别链接时，不属于此类别的项目会变暗（这似乎工作正常）
点击类别链接后，隐藏不属于此类别的项目（似乎也没问题）
检测浏览器窗口大小并选择样式表以适合。即适用于旧屏幕或移动设备。继续并调整浏览器窗口的大小。

当浏览器窗口很窄时，还有一个向下滚动到“主”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>

如果你已经走到这一步并看看了，谢谢！

所以我的问题是;

~~我在循环中丢失了break;吗？不太确定如何使用休息。~~
选择我的CSS文件后，在更改之前会有第一个样式的闪存。有没有办法避免这种情况？
当浏览器位于最窄的样式表中时，我点击了我的链接，之后再次向上滚动时出现问题。救命？！： - ）
任何明显的错误或遗漏会使这更容易吗？
我开始觉得我的页面上有很多脚本。也许我应该把它放在一个单独的文件中。那会有帮助吗？
可以发布这样的多个问题，还是个人问题？

提前感谢任何有目光的人。

Answer 1

好的，我会咬人，虽然我不打算提供一份全面的清单：

有多种方法可以解决CSS flash问题。最简单的方法是隐藏所有内容，直到你加载了正确的样式表，然后在加载后显示所有内容。
是的，一般来说，将Javascript放在单独的文件中总是一个好主意 - 它只会让您更轻松地管理代码，特别是如果您想在多个页面上重复使用它们。
您遗漏了很多var条款，例如为all_projects_showing_text。这在语法上是正确的，但在Javascript中是一个坏主意，因为它使这些变量全局化，将它们附加到window对象。如果您需要全局变量，您仍应使用var声明它。
我没有看到break适合，甚至可能的任何地方。您通常在break或for循环中使用while来停止循环;我在代码中没有看到任何类似的循环。 JQuery代码经常使用.each()，或者只是隐式地遍历选择中的所有项目;我很少在使用jQuery的代码中看到break，尽管当然有可能是合适的。

缓存或链接jQuery选择器通常是一个好主意。例如，

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

可能是

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

或

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

或者甚至（在这种情况下，因为.removeClass()可以一次删除几个类）：

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

从else if开始的if(tag=="graphic-design"){部分可以更好地构建为地图+查找：

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

Answer 2

关于break：

的回答

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

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

Answer 3

break不是函数。这是一个声明，所以你不要添加括号。
在选择css之前加载页面。如果您想定位不同的屏幕尺寸，可以查看css3 media queries。在页面开头添加样式应该没有闪烁。您仍然可以使用js选择样式作为备份方法。
我认为您在每个调整大小事件上添加了一个新的点击处理程序！这是在点击上运行的很多动画，尝试只设置一次处理程序。
缺少var，正如nrabinowitz已经提到的那样。缩进可以更好/更一致。
JS in Separate files更好。
- 客户可缓存 - ＆gt;第一次访问后页面变得更快
- 可以通过不同页面重复使用
- 更易于管理（版本控制）
单一（经过充分研究）的问题通常会更好。

请关注我的初学者javaScript

3 个答案: