Question

I’m totally new to jQuery trying to write some scripts to make a navigation item #printInteract trigger the container border to change colors. It felt like this should work? is this a symantics error? if not could someone maybe explain a bit where I went wrong?

jQuery:

$(document).ready(function(){
var printBorder = $("#container").css("border-color", "blue");
function changeBorder() {printBorder}
$("#printInteract").on("click", changeBorder);

});

CSS
#container{height:95%; position:relative;.clearfix(); border:.1875em #fff solid;}

HTML

 <nav>
    <ul class="navSpaces">
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a></li>
    <li id="printInteract" class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>print</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>video</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>web</h3></div></a></li>
    </ul>
  </nav>

Answer 1

You’re close but slightly off. I’ve commented your code to explain your mistakes.

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //when this function is called, change the border
    function changeBorder() {
        container.css({'border' : '1px black solid'});
    }

    //watch for the click event and call your function
    $("#printInteract").on("click", changeBorder);
});

Further, in this case, changeBorder doesn’t doo much. Namely, it only changes the border. For this case, you can just pass an anonymous function rather than define and call a function

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //watch for the click event and call your function
    $("#printInteract").on("click", function(){
        //this is the anonymous function. This will only
        // be executed when a click event is triggered
        container.css({'border' : '1px black solid'});
    });
});

Footnote: You can even skip the part where you grab the jquery object for your container and store it in a variable, since you only reference that object once (while changing borders). However, if you reference that object multiple times, it is considered best practice to ‘cache’ the object in a variable as the code above is doing. This is because every time you request a jQuery object, jQuery has to traverse the DOM looking for all elements that match your selector. Thus, you get marginally better performance by caching the object.

Edit:

There is a better way to do what you’re looking for without using 4 click handlers. In fact, you should certainly attempt to minimize the number of event listeners you use in a page since each takes its toll.

One way to achieve what you’re looking for is to create a Javascript object that serves as a lookup table.

See the demo here

This is the Javascript / Jquery code I used:

//this is the lookup table that maps
// id with the color scheme
var borderScheme = {
    'printInteract' : '1px solid blue',
    'videoInteract' : '1px solid orange',
    'webInteract' : '1px solid pink',
    'allInteract' : '1px solid white'
};

$(document).ready(function(){
    // i am applying border to the entire nav element
    var nav = $('nav');

    //we attach a single click listener on li elements
    $('li').on('click',function(){

        // get the id of the clicked li
        var id = $(this).attr('id');

        // lookup the corresponding border scheme from the lookup table
        var color = borderScheme[id];

        // was there a color defined?
        if (color != 'undefined') {
            // if yes, make the change
            nav.css({'border': color});
        }
    });
});

​