Пытаясь понять, как упростить Jquery - PullRequest
Новая
       8

Пытаясь понять, как упростить Jquery

0 голосов
/ 24 февраля 2012

Я очень новичок в jQuery, и я хотел бы убедиться, что я пишу это правильно.Я хотел бы начать понимать, как писать как можно меньше.Я думаю, что следующее должно быть в функции .each (), но я не уверен.Вот почему я кодирую его в операторы if.

HTML : 

            <div id="header" class="container">
          <div class="row">
            <div class="sixcol"> <a href="#"><img src="http://dermdev3/sites/Dermatology/images/logo/derm_header_penn_logo.png" alt="Penn Medicine - Dermatology Header Logo" name="logo" width="363" height="103" id="logo"></a></div>
            <div class="sixcol last">
              <ul id="navigation">
                <li><a class="navy" href="#" title="Home">Home</a></li>
                <li><a class="red" href="#" title="Link">Link</a></li>
                <li><a class="yellow" href="#" title="Link">Link</a></li>
                <li><a class="light-blue" href="#" title="Link">Link</a></li>
              </ul>
            </div>
          </div>
        </div>

Jquery : 

$(function () {
//Webpages
var home = "Home.hmtl";
var wiki = "Wiki.html";

//Main Navigation
var header = $("div#header");
var colors = "navy red yellow light-blue";
var nav = $("#navigation");
var navList = $("#navigation li");

if (pathname == wiki) {
    header.addClass("red");
    $("#navigation a.red").attr("id", "current");

    navList.children().mouseenter(function () {
        $("#navigation a.red").removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass("red");
        $("#navigation a.red").attr("id", "current");
    });
}
if (pathname == home) {
    header.addClass("navy");
    $("#navigation a.navy").attr("id", "current");

    navList.children().mouseenter(function () {
        $("#navigation a.navy").removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass("navy");
        $("#navigation a.navy").attr("id", "current");
    });
}

});

1 Ответ

1 голос
/ 24 февраля 2012 
var pages = {
   "Wiki.html": {
      "className": "navy",
   },
   "Home.html": {
      "className": "red"
   }
   // add other pages here.
};

var header = $("div#header");
var colors = "navy red yellow light-blue";
var nav = $("#navigation");
var navList = $("#navigation li");

function configure(page){
    var anchors = function(){
       return nav.find("a."+page.className);
    }
    header.addClass(page.className);
    anchors().attr("id", "current");

    navList.children().mouseenter(function () {
        anchors().removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass(page.className);
        anchors().attr("id", "current");
    });
}

Тогда назовите это: 

configure(pages[pathname]);
...