for (var state in reg) { (function (st, state) { st[0].style.cursor = "pointer"; st[0].onmouseover = function () { st.animate({fill: st.color, stroke: "#ccc"}, 500); st.toFront(); }; st[0].onmouseout = function () { st.animate({fill: "#333", stroke: "#666"}, 500); st.toFront(); }; if (state == "nsw") { st[0].onmouseover(); } })(reg[state], state); }

Explain if it’s not in the scrap in the part what is being moved and how this wrapping function works, especially its parameters and what the brackets with parameters are at the end

THX

    2 answers 2

     for (var state in reg)

    There is some kind of reg object that has a certain number of properties, let's say:

     var reg = { method: 1, method_else: 2, .... }

    This loop will iterate over all the properties of the object and assign it to the state method.

    The following describes a function with two parameters, and actually after its description it is called with certain parameters in this case (reg [state], state)

    • thank. and how to understand the construction (function (st, state) {what is st and how is it passed to this function? st [0] .style.cursor = "pointer"; st [0] .onmouseover = function () {st. animate ({fill: 'red', stroke: "#ccc"}, 500); st.toFront (); console.log (state);}; again, why are manipulations performed with the index 0? Thanks in advance - Vazgen
    • as for me a strange question, then output st and reg to the console and see what is there and from where. Maybe it is an array of some or a set of some elements. You did not give us the full code and description of the reg function. - binliz
    • Most likely st is a DOM element. Historically, as a result of sampling DOM elements for a particular selector, an array is returned (which is logical and correct). Therefore, it simply goes to the first element of the array of DOM elements that are suitable for some selector. - mrakolice

    This "wrapping" function plays a crucial role - in this application for each element of the object, the local scope of the variables is created and stored in the loop. This is necessary in order to correctly hang mouse event handlers on each element.
    If such a "wrapper" is not used, then the event hangs itself only one - on the last element.
    More details about this can be found here: Closures