can someone please explain how this jquery code works

Question

i picked this code online but i'm unable to understand how it works. without understanding i cannot edit it for my use. it is for closing a panel by up-slide when i click on "x" button. i want to know how is the effect created in the script? here is the html:

<div class="col-md-3 col-sm-6 col-xs-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Using Slide Up</h3>
            <span class="pull-right clickable" data-effect="slideUp">x</span>
        </div>
        <div class="panel-body">Panel content</div>
        <div class="panel-footer">Panel footer</div>
    </div>
</div>

the script working on this is:

    $(function() {
        $('.clickable').on('click', function() {
            var effect = $(this).data('effect');
            $(this).closest('.panel')[effect]();
        });
    });

What part of the code exactly are you not understanding? Are you familiar with jQuery? — Bergi, Nov 15 '17 at 12:19
When clicking on `.clickable` element, it applies `slideUp` to the closest `.panel` item — , Nov 15 '17 at 12:19
is this `$(this).closest('.panel')[effect]()` the line you don't get? — Snow, Nov 15 '17 at 12:19
@Bergi yes i'm familiar with jquery. please explain these two lines specifically: var effect = $(this).data('effect'); $(this).closest('.panel')[effect](); — Gurjot kaur, Nov 15 '17 at 12:20
You are obviously not familiar with jQuery if you don't understand those two basic lines. All the information you need is in their documentation about this. I suggest you go read them. — Robert Wade, Nov 15 '17 at 12:22
https://stackoverflow.com/questions/4195970/what-does-this-mean — Snow, Nov 15 '17 at 12:23
@JohnSmith i'm familiar with "this" .the link is not helpful — Gurjot kaur, Nov 15 '17 at 12:30
@Gurjotkaur Which things do http://api.jquery.com/data/, http://api.jquery.com/closest/ and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation not explain? — Bergi, Nov 15 '17 at 12:31
And some of you need to read http://interpersonal.stackexchange.com/questions/6565/how-to-politely-handle-support-requests-which-lack-some-basic-understanding — fgb, Nov 15 '17 at 12:43

score 2 · Answer 1 · answered Nov 15 '17 at 12:24

It's very simple. This is the jQuery code. There is a click event bound to all elements with class clickable:

$('.clickable').on('click', function() {...});

Then you want to know what effect you would like to have. To do so, you take the data-effect attribute value:

var effect = $(this).data('effect'); // returns 'slideUp'

At the end, you want to slide up the closest element with class panel attached to it:

$(this).closest('.panel')[effect]();

I understand that this part may be kind of hard to understand. The trick here is that you keep the effect name in a variable. And want to call the method with that name on the .panel element. This is how you do it in JS- you put the variable in square brackets and append parentheses. This way you call the .slideUp() method. It is evaluated to something like this:

$(this).closest('.panel').slideUp();

Also, I suggest you read something about jQuery: https://api.jquery.com/

score 0 · Accepted Answer · answered Nov 15 '17 at 12:28

$('.clickable')

This is your jquery selector. It grabs all elements with the class "clickable" (the dot represents class. if it had been "#clickable" it would look for any element with the id of clickable)

.on('click', function() {
}

Now for all your selected elements, we're wiring up a click event. When the element selected is clicked, then the function will run.

var effect = $(this).data('effect');

In this line, we're setting the variable "effect" to have the value of the data property "data-effect" from the clicked element (which can be referenced in the function using the keyword "this"). The ".data" method returns all properties that are prefixed "data-".

$(this).closest('.panel')[effect]();

Here we're now searching for the closest element with the class "panel" to our clicked element (which, remember, can be referenced in the function using "this").

As "effect" is a variable, the code

.[effect]()

is identical (in your example) to coding (as your data-effect="slideUp" in the html)

.slideUp()

In JavaScript, you can use either dot notation or bracket notation interchangeably.

Hope this helps

can someone please explain how this jquery code works

2 Answers2