Unable to understand this jquery code|Programmer puzzle solving

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.

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.

Share Improve this question asked Mar 15, 2019 at 15:13 Raashid Din 2182 silver badges19 bronze badges

"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:

Find all elements with class feature-icon-holder inside the element with ID feature-links-holder.
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.

Programmer puzzle solving

Unable to understand this jquery code

1 Answer 1

Articles related to this article

comment list (0)