1
我的工作an interface有四個主要部分：請投的眼睛在我的初學者的javaScript
- 當一個類別鏈接懸停，這一類不是在項目變暗（這似乎是工作確定）
- 當單擊類別鏈接時，不在此類別中的項目被隱藏（似乎也可以）
- 檢測到瀏覽器窗口大小並選擇適合的樣式表。即舊屏幕或手機。繼續並調整瀏覽器窗口的大小。
當瀏覽器窗口很窄時，會有一個額外的腳本向下滾動到「主」格。
<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文件被選中時，第一個樣式會在其更改前閃現。有沒有辦法避免這種情況？
- 當瀏覽器處於最窄的樣式表中，並且我點擊了我的鏈接後，再次滾動時出現問題。幫幫我？！ :-)
- 任何明顯的錯誤或遺漏，會使這更容易？
- 我開始覺得我的頁面上有很多腳本。也許我應該把它放在一個單獨的文件中。這會有幫助嗎？
- 可以發佈這樣的問題或者他們應該是個人嗎？
在此先感謝任何看過的人。
我不禁爲你的嘗試和張貼代碼+1。謝謝！ –
'break'不是一個函數。 – SLaks
單獨發佈每個問題可能會更好。儘量保持它儘可能的窄和容易重現，以便人們更容易回答。對於不是直接問題的更一般問題，您可能需要考慮http://codereview.stackexchange.com/ –