jQuery: how can I use $(this) selector between multiple files?

Question

I have a file "A" with

$('.myClass').mouseover(function() {
    myFunction();
});

and a file "B" with

function myFunction() {
    $(this).hide();
};

It doesn't work because $(this) is undefined.

Is there a way I can pass the $(this) selector across multiple files?

why not `$('.myClass').mouseover(myFunction)`? – Transamunos Nov 13 '20 at 15:41 — Transamunos, Nov 13 '20 at 15:41
@Transamunos it doesn't work – mini Lustucru Nov 15 '20 at 14:18 — mini Lustucru, Nov 15 '20 at 14:18

score 0 · Answer 1 · answered Nov 13 '20 at 13:51

The quickest and easiest solution I can think of:

$('.myClass').mouseover(function(e) {
    myFunction(e.target);
});

function myFunction(element) {
    $(element).hide();
};

Since this inside myFunction() would return the Window object, I'd pass the element gathered from the jQuery event (e.target) and place that inside a jQuery function inside myFunction(). With this you can manipulate the exact element the event was triggered on.

score 0 · Answer 2 · answered Nov 13 '20 at 14:13

0

file A

$('.myClass').mouseover(function() {
    myFunction($(this));
});

file B

function myFunction(element) {
    element.hide();
};

answered Nov 13 '20 at 14:13

ibrahim s

179
6

score 0 · Answer 3 · answered Nov 13 '20 at 14:27

You can either reference the method directly or use apply() or call()

function myFunction() {
    $(this).toggleClass('active');
};


function myFunction2() {
    $(this).toggleClass('foo');
};

$('.myClass').mouseover(myFunction);


$('.myClass').mouseover(function () {
  myFunction2.apply(this);
});

.active { color: red;}
.foo { background-color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>

jQuery: how can I use $(this) selector between multiple files?

3 Answers3