CODEWITHSUNDEEP
javascriptjqueryhtmlcss
diagold
diagold

Reputation: 477

call javascript function on div with same class

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.

Upvotes: 0

Views: 377

Answers (3)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Manikant Gautam
Manikant Gautam

Reputation: 3591

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>

Upvotes: 1

user8897421
user8897421

Reputation:

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");
}

Upvotes: 2

Related Questions