function expression - closures

function expression - closures

by dipaks2011

HTML

<li>
  <a class="tab">Tab 1</a>
  <div class="desc active">Content 1</div>
</li>
<li>
  <a class="tab">Tab 2</a>
  <div class="desc">Content 2</div>
</li>
<li>
  <a class="tab">Tab 3</a>
  <div class="desc">Content 3</div>
</li>

CSS

.desc{ display: none; }
.desc.active{ display: block; }

JavaScript

/*
Ref: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ 

Function Declarations vs. Function Expressions 
*/ 


/*
function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
console.log(foo());
//8
*/

/*
//console.log(foo());
//3
function foo(){
    var bar = function() {
        return 3;
    };
    return bar();
    var bar = function() {
        return 8;
    };
}
//console.log(foo());
// 3
*/

/*
function foo(){
    return bar();
    var bar = function() {
        return 3;
    };
    var bar = function() {
        return 8;
    };
}
//console.log(foo());
//Uncaught TypeError: bar is not a function  
*/

/*
closures 

https://www.sitepoint.com/function-expressions-vs-declarations/
*/

function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // Do stuff with tab.
        // The index variable can be accessed from within here.
        //document.querySelectorAll('.first').style.display = 'none';
        //index.nextSibling.style.display = 'block';
        $('.first, .desc').hide();
        $(this).addClass('active').next('.desc').show();
    };
}

var tabs = document.querySelectorAll('.tab'), i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}