在没有“可能严格违反”的功能中使用此功能。

Question

I am writing a Jquery function that is called on a 'click' event. The function needs to make use of this , so it can refer to the clicked element:

        var allPanels = $('[data-display-mode~="accordion"] .unit-text').hide();
        $('[data-display-mode~="accordion"] .unit').addClass("closed");

        function accordion($this, $type) {
            var $root;
            var $body;
            var $this = $(this);

//Change variables depending on function
            if ($type === "stack") {
                $root = $(this).parents(".unit");
                $body = $(this).parents(".unit").find('.unit-text');
            } else if ($type === "panel") {
                $root = $(this);
                $body = $(this).find('.unit-text');
            }

            if ($root.hasClass('closed')) {
                allPanels.slideUp().parents(".unit").removeClass('open').addClass('closed');
                $root.removeClass('closed').addClass('open');
                $body.slideDown();
            } else {
                $root.removeClass('open').addClass('closed');
                $body.slideUp();
            }
        }

        // Call function on Click
        $('[data-display-mode~="accordion"][data-display-mode~="stack"] .unit-heading').click(accordion("stack"));
        $('[data-display-mode~="accordion"][data-display-mode~="panel"]').click(accordion("panel"));
    });

How can I do this? In addition, JSlint says I have "Possible strict violation" for my variables. How can I fix this?

I have made a JSFiddle here

---

Steps I have tried

1. Using .apply(this) as mentioned here .
2. Putting $this in the function, so it can be passed in ( as mentioned here)

Answer 1

What is important to know is that .click need a function reference. What you are doing is calling a function that does not return any function reference.

To achieve what you want, you can simply make accordion return an other function. You'll then have everything you want :

    function accordion($type) { //Removed the $this argument
        return function(){ //That will be the function called when you click on the target
            var $root;
            var $body;
            var $this = $(this);

            //Change variables depending on function
            if ($type === "stack") {
                $root = $(this).parents(".unit");
                $body = $(this).parents(".unit").find('.unit-text');
            } else if ($type === "panel") {
                $root = $(this);
                $body = $(this).find('.unit-text');
            }

            if ($root.hasClass('closed')) {
                allPanels.slideUp().parents(".unit").removeClass('open').addClass('closed');
                $root.removeClass('closed').addClass('open');
                $body.slideDown();
            } else {
                $root.removeClass('open').addClass('closed');
                $body.slideUp();
            }
        }
    }

Fiddle

If you check the console, you'll see that the $type is ok.