call javascript function on div with same class

Question

I have a javascript function i would like to call on multiple div with same class but when i call the function and hover over the first div the function is called on the other div with same class

function flip() {
    $('.front').css("display", "none");
    $('.back').fadeIn();
}
function flipBack() {
    $('.front').fadeIn();
    $('.back').css("display", "none");
}

html

<div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
                <div class="front">
                    <i class="typcn typcn-globe"></i>
                    <h3>Nigeriaeexport</h3>
                    <p>Your one stop export solution platform for everything export.</p>
                </div>
                <div class="back">
                    Want to work
                </div>
            </div>
            <div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
                <div class="front">
                    <i class="typcn typcn-location-arrow"></i>
                    <h3>XPT Logistics</h3>
                    <p>The top Company in terms of Export Logistics in Nigeria</p>
                </div>
                <div class="back">
                    Want to work
                </div>
            </div>

What I want is when mouseenter the .subMainSlate the .front fadeOut() and .back fadeIn().

Thanks.

see the answer. You missed using find.

Manikant Gautam
– Manikant Gautam

2017-12-09 14:35:26 +00:00
Commented Dec 9, 2017 at 14:35 — Manikant Gautam
– Manikant Gautam, Commented Dec 9, 2017 at 14:35
Yes. Thanks much.

diagold
– diagold

2017-12-09 14:36:51 +00:00
Commented Dec 9, 2017 at 14:36 — diagold
– diagold, Commented Dec 9, 2017 at 14:36

user8897421 · Accepted Answer · 2017-12-09 14:28:45Z

2

You're passing this as the argument to the handler, but you're not using it. All you need to do is define a parameter on your function and use that.

function flip(elem) {
    // 'elem' is the element that received the event
    $(elem).find('.front').css("display", "none");
    $(elem).find('.back').fadeIn();
}
function flipBack(elem) {
    // 'elem' is the element that received the event
    $(elem).find('.front').fadeIn();
    $(elem).find('.back').css("display", "none");
}

answered Dec 9, 2017 at 14:28

user8897421

Sign up to request clarification or add additional context in comments.

1 Comment

diagold Over a year ago

Works fine now.Thanks.

Manikant Gautam · Accepted Answer · 2017-12-09 14:33:18Z

Instead of binding event on class , bind event on element which is whithin the root node. You can use find selector to select only nodes which are part of root node.

function flip(el) {
    $(el).find('.front').css("display", "none");
    $(el).find('.back').fadeIn();
}
function flipBack(el) {
    $(el).find('.front').fadeIn();
    $(el).find('.back').css("display", "none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
                <div class="front">
                    <i class="typcn typcn-globe"></i>
                    <h3>Nigeriaeexport</h3>
                    <p>Your one stop export solution platform for everything export.</p>
                </div>
                <div class="back">
                    Want to work
                </div>
            </div>
            <div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
                <div class="front">
                    <i class="typcn typcn-location-arrow"></i>
                    <h3>XPT Logistics</h3>
                    <p>The top Company in terms of Export Logistics in Nigeria</p>
                </div>
                <div class="back">
                    Want to work
                </div>
            </div>

Mamun · Accepted Answer · 2017-12-09 14:40:05Z

Use the find() on the targeted element like the following:

function flip(that) {
  $(that).find('.fornt').css("display", "none");
  $(that).find('.back').fadeIn();
}
function flipBack(that) {
  $(that).find('.front').fadeIn();
  $(that).find('.back').css("display", "none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
    <div class="front">
        <i class="typcn typcn-globe"></i>
        <h3>Nigeriaeexport</h3>
        <p>Your one stop export solution platform for everything export.</p>
    </div>
    <div class="back">
        Want to work
    </div>
</div>
<div class="subMainSlates" onmouseenter="flip(this)" onmouseleave="flipBack(this)">
    <div class="front">
        <i class="typcn typcn-location-arrow"></i>
        <h3>XPT Logistics</h3>
        <p>The top Company in terms of Export Logistics in Nigeria</p>
    </div>
    <div class="back">
        Want to work
    </div>
</div>

Collectives™ on Stack Overflow

call javascript function on div with same class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related