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

Question

我有一个javascript函数，我想在同一个class多个div上调用，但是当我调用该函数并将hover在第一个div该函数在同一个class的另一个div上调用

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

Answer 2

绑定事件不是在类上绑定事件，而是在根节点中的元素上绑定事件。 您可以使用查找选择器仅选择属于根节点的节点。

 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> 

Answer 3

在目标元素上使用find() ，如下所示：

 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>