javascript - 在具有相同类的 div 上调用 javascript 函数

Question

我有一个 javascript我想调用多个函数 div与相同class但是当我调用函数和hover超过第一div该函数在另一个上调用 div与相同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>    

我想要的是什么时候mouseenter .subMainSlate .front fadeOut()和 .back fadeIn() .

谢谢。

Answer 1

您将 this 作为参数传递给处理程序，但您没有使用它。您需要做的就是为您的函数定义一个参数并使用它。

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