need explanation of javascript code

Question

I have a code snippet, which have css, javascript, and html.

this is the full code

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css">
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/*Remove connectors before root*/
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
/*Remove connectors after last child*/
 .tree li:last-child::before {
    height: 30px;
}
/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}
</style>
<script src="http://snipplicious.com/js/jquery.js"></script>
<script src="http://snipplicious.com/js/bootstrap.min.js"></script>
<script>$(function () {
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});</script>
</head>
<body>
<div class="container">
  <h1>Bootstrp tree view - click to hide</h1>
  <div class="tree">
    <ul>
      <li>
        <a href="#">Parent</a>
        <ul>
          <li>
            <a href="#">Child</a>
            <ul>
              <li>	<a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Child</a>
            <ul>
              <li><a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
                <ul>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                </ul>
              </li>
              <li><a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

this is javascript code that I ask you to explain

<script>$(function () {
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});</script>

my question are

from javascript code on above, what the value of "e" in function(e), and where the value which will input into "e" come from?

how to convert javascript code on above to a function?, i have been trying this

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    e.stopPropagation(); }

but it didnt work

UPDATE

this is my code after following Ze Rubeus and A.Wollff

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/*Remove connectors before root*/
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
/*Remove connectors after last child*/
 .tree li:last-child::before {
    height: 30px;
}
/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}
</style>
<script src="jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    

    function showHide(e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    }
    
    $('.tree li').on('click', showHide);
    
//$(function () {
//    
//    
//    $('.tree li').on('click', function (e) {
//        var children = $(this).find('> ul > li');
//        if (children.is(":visible")) children.hide('fast');
//        else children.show('fast');
//        e.stopPropagation();
//    });
//});
</script>
</head>
<body>
<div class="container">
  <h1>Bootstrp tree view - click to hide</h1>
  <div class="tree">
    <ul>
        <li >
        <a href="#">Parent</a>
        <ul>
            <li >
            <a href="#">Child</a>
            <ul>
              <li>	<a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li >
            <a href="#">Child</a>
            <ul>
              <li><a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
                <ul>
                    <li >	<a href="#">Great Grand Child</a>
                  </li>
                  <li >	<a href="#">Great Grand Child</a>
                  </li>
                  <li >	<a href="#">Great Grand Child</a>
                  </li>
                </ul>
              </li>
              <li ><a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

thanks mate^^

ZEE · Accepted Answer · 2015-03-07 11:08:21Z

2

The e can be used to obtain specific information about the click (left, right or center; coordinates clicked; DOM object clicked on) and this is a Jquery syntax not a Javascript

  <script>$(function () {
        $('.tree li').on('click', function (e) {
            var children = $(this).find('> ul > li');
            if (children.is(":visible")) children.hide('fast');
            else children.show('fast');
            e.stopPropagation();
        });
    });</script>

and for the second question , this is not a JavaScript syntax ($(this).find('> ul > li');) :

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    e.stopPropagation(); }

any way even if it was a JS syntax you'll need to call your function like so and gave a value to e but this makes no seance with your code :

showHide(e);

or you can use an IIFE (Immediately-invoked function expression) like the following :

(function(){
  var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation(); } 
}(e));

other solution to adabte your function with the code above :

$(function () {
    $('.tree li').on('click', showHide);
});

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    return false;
}

LIVE DEMO

edited Mar 7, 2015 at 11:08

answered Mar 7, 2015 at 10:10

ZEE

5,8994 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

A. Wolff Over a year ago

@stacheldraht27 $('.tree li').on('click', showHide);

stacheldraht27 Over a year ago

@Ze Rubeus thank you so much dude, i still confuse about the "e" thing, what "e" thing called in jquery?, so I can browse it , thanks thanks thanks ^^

ZEE Over a year ago

e can be used to obtain specific information about the click (left, right or center; coordinates clicked; DOM object clicked on)

A. Wolff Over a year ago

$('.tree li').on('click', showHide(e)); will use the returned value of showHide method as handler, which in this case is undefined

A. Wolff Over a year ago

@stacheldraht27 It works as expected here: jsfiddle.net/phjx7e7p That's said, you should prevent default behaviour too to avoid page scrolling to top, you can use return false; as shorthand for both, stopPropagtion and preventDefault: jsfiddle.net/phjx7e7p/1

|

ReallyMadeMeThink · Accepted Answer · 2015-03-07 10:24:37Z

0

The snippet is jQuery, not pure javascript. The wrapper,

$(function () {
...
});

ensures the page has finished loading the DOM before execution. This is necessary when attaching event handlers, as this snippet does:

$('.tree li').on('click', function (e) {
...
}

Attaches an "onclick" event handler to all list items with a parent of class "tree". The "e" argument refers to the element which triggered the event.

The rest is basic jQuery DOM manipulation.

I don't really understand what you mean by "convert to a function". This snippet sets up an event handler, it's something you do once. Why do you need to convert it to a function? Unless you're talking about converting it to a pure javascript function, which is something entirely different.

answered Mar 7, 2015 at 10:24

ReallyMadeMeThink

1,0818 silver badges13 bronze badges

1 Comment

stacheldraht27 Over a year ago

thanks for your explanation , this help me a lot. because im still a noob in javascript area, so i need it to be javascript function, then i can put the function as a result of one condition. eg :<?php if(condition) ? jsFunctionShow() : jsFunctionHide() ?> .

Ishan Madhusanka · Accepted Answer · 2015-03-07 10:28:23Z

0

'e' comes from the 'click' event.. the clicked target

If you want to make the script a function may be you can do something like this..

<script>
$('.tree li').on('click', function (e) {
        showHide(e);
        e.stopPropagation();
});

function showHide(e){
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
}
</script>

answered Mar 7, 2015 at 10:28

Ishan Madhusanka

8311 gold badge13 silver badges22 bronze badges

Comments

Arkantos · Accepted Answer · 2015-03-07 10:42:47Z

from javascript code on above, what the value of "e" in function(e), and where the value which will input into "e" come from?

e is an alias variable of event object which has properties giving information about type of event, target element which triggered the element and other info

how to convert javascript code on above to a function?, i have been trying this

The code snippet in your example is using jQuery JavaScript library. $ is just another alias of jQuery global object created in JS once you include that library.

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    e.stopPropagation(); 
}

Here you're just defining a function, you need to actually bind it to some event, in your case click on li element. As you're using $ and other jQuery API inside your showHide, you need to use jQuery to bind an event handler as mentioned by you

$('tree li').on('click',showHide);

If you can write your code inside showHide() in pure JS, then you can attach event on some element like this

document.getElementById('myLi').addEventListener('click', showHide, false);

Collectives™ on Stack Overflow

need explanation of javascript code

4 Answers 4

19 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

19 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related