Unable to understand this jquery code

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I recently came through a website and checked its functionality. I visited their main javascript file and came through this code.

    var featureIconHolder = $(".feature-icon-holder", "#features-links-holder");

    featureIconHolder.on("click",function(){
        featureIconHolder.removeClass("opened");
        $(this).addClass("opened");
        $(".show-details","#features-holder").removeClass("show-details");
        $(".feature-d"+$(this).data("id"), "#features-holder").addClass("show-details");
    });

I am unable to understand how he stores two things in one variable at a time. Also what is $(this).data("id") . Will please someone explain me this code in detail. Thanks in advance.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I recently came through a website and checked its functionality. I visited their main javascript file and came through this code.

    var featureIconHolder = $(".feature-icon-holder", "#features-links-holder");

    featureIconHolder.on("click",function(){
        featureIconHolder.removeClass("opened");
        $(this).addClass("opened");
        $(".show-details","#features-holder").removeClass("show-details");
        $(".feature-d"+$(this).data("id"), "#features-holder").addClass("show-details");
    });

I am unable to understand how he stores two things in one variable at a time. Also what is $(this).data("id") . Will please someone explain me this code in detail. Thanks in advance.

• jquery

Share Improve this question asked Mar 15, 2019 at 15:13 Raashid DinRaashid Din 21822 silver badges1919 bronze badges 2

• "he stores two things in one variable at a time" - do you mean $(".feature-icon-holder", "#features-links-holder") ? – Rup Commented Mar 15, 2019 at 15:23
• yes, he stores. but what i really does in plain english will you please explain it – Raashid Din Commented Mar 15, 2019 at 15:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your specific questions:

var featureIconHolder = $(".feature-icon-holder", "#features-links-holder");

Here's the documentation link for this: http://api.jquery/jQuery/#jQuery1
The two arguments here are selector and context. What this does is find all elements of class feature-icon-holder that are descendents of the element with ID features-links-holder. This constructs an array-like object that contains 0+ elements depending on how many matched.

what is $(this).data("id")

Inside the click handler, this is the element that has been clicked. So $(this) is a jQuery object for that element, and .data reads or stores values against an element. It's then used to construct another selector by concatenating strings.

---

This changes the displayed 'feature' based on the icon clicked. What it does:

1. Find all elements with class feature-icon-holder inside the element with ID feature-links-holder.
2. Set up a click handler on all of these elements:
   1. removes the 'opened' class from all of these icons, i.e. it clears 'opened' from the previously open element. The opened class is probably a highlight around the icon.
   2. sets the 'opened' class on this icon, presumably highlighting it.
   3. clears the 'show-details' class from any elements inside ID feature-holder that currently has the class; again there's probably only one of these, the currently displayed feature
   4. adds the 'show-details' class to the element inside feature-holder that has a class name matching the ID stored with the icon clicked. This will presumably show the feature elsewhere on the page.