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

Answer 2

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

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>

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

3 个答案: