的JavaScript - 應用功能爲特定的div的div集合中使用相同的類名

Question

當我將鼠標懸停在.winner-container，在JS函數告訴.headline搬出.winner-container，它告訴.bottom遷入.winner-container。當我離開的時候，恰恰相反。

問題是，我將有數百個這樣的容器，全部都是.winner-container類。所以我意識到，當我將鼠標懸停在其中一個容器上時，該功能一次就應用於數百個不同的容器。我只想把這個函數應用到我懸停的特定容器上。我可以通過給每個容器一個id來做到這一點，然後爲每個id編寫新的JS代碼，但這需要很多工作，因爲會有數百個這樣的div。有沒有更優雅的解決方案？

https://jsfiddle.net/6sm6ajht/

HTML

<div class="winner-container"> 
    <div class="top"> 
    <h4 class="headline">SME Example 1</h4> 
    </div> 
    <div class="bottom"> 
    <div class="winner-words"> 
     <h6>SME Examle 1 is a technology company.</h6> 
     <h6><a>Learn more...</a></h6> 
    </div> 
    </div> 
</div> 

<div class="winner-container"> 
    <div class="top"> 
    <h4 class="headline">SME Example 2</h4> 
    </div> 
    <div class="bottom"> 
    <div class="winner-words"> 
     <h6>SME Examle 2 is an e-commerce company.</h6> 
     <h6><a>Learn more...</a></h6> 
    </div> 
    </div> 
</div> 

CSS

.winner-container { 
    position: relative; 
    box-shadow: 0px 2.5px 1px 0px rgba(0, 0, 0, 0.25); 
    border: 1px solid #074E68; 
} 

.winner-container, 
.top, 
.bottom { 
    width: 10em; 
    height: 12em; 
    overflow: hidden; 
} 

.bottom { 
    position: absolute; 
    height: 12em; 
    width: 100%; 
    top: 12em; 
    transition: 0.5s ease-in-out; 
} 

.top .headline { 
    position: absolute; 
    top: 2.5em; 
    width: 100%; 
    background: rgba(255, 255, 255, 0.8); 
    box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1); 
    transition: 0.5s ease-in-out; 
} 

.top-up .headline { 
    top: -2.5em; 
} 

.bottom-up.bottom { 
    top: 0em; 
    background-color: rgba(0, 0, 0, 0.65); 
} 

的JavaScript

$(".winner-container").on("mouseenter", function() { 
    $(".top").addClass('top-up'); 
    $(".bottom").addClass('bottom-up'); 
}); 

$(".winner-container").on("mouseleave", function() { 
    $(".top").removeClass('top-up'); 
    $(".bottom").removeClass('bottom-up'); 
}); 

Answer 1

這是$(this)選擇器的好機會。由於有許多相同的元素，但您只希望每個事件處理程序引用該特定元素，因此可以使用$(this)並使用相對選擇器（如.children）來針對與this元素相關的其他元素。

JSfiddle

$(".winner-container").on("mouseenter", function() { 
    $(this).children(".top").addClass('top-up'); 
    $(this).children(".bottom").addClass('bottom-up'); 
}); 

$(".winner-container").on("mouseleave", function() { 
    $(this).children(".top").removeClass('top-up'); 
    $(this).children(".bottom").removeClass('bottom-up'); 
}); 

Answer 2

常e您的.top和.bottom的選擇器爲$(this).find('.top')和$(this).find('.bottom')。

這在事件處理程序的上下文中是事件發生的元素。

Answer 3

你可以嘗試使用$（本），以便選擇指定你只希望當前元素是你指令的範圍：

$(".winner-container").on("mouseenter", function() { 
    $(this).children(".top").addClass('top-up'); 
    $(this).children(".bottom").addClass('bottom-up'); 
}); 

$(".winner-container").on("mouseleave", function() { 
    $(this).children(".top").removeClass('top-up'); 
    $(this).children(".bottom").removeClass('bottom-up'); 
}); 

Answer 4

將$(".winner-container")將類別爲winner-container的所有元素作爲目標，併爲每個元素添加一個事件，這就是爲什麼您有兩個元素，但您只需定義一次。

同$('.top')，這將針對所有的類叫做頂部，你需要使用$(this).find('.top')事件內的目標只有當前元素，並使用find（）方法，以該元素中搜索，找到top和bottom添加或刪除類做任何你想要的。

$(".winner-container").on("mouseenter", function() { 
 
    $(this).find('.top').addClass('top-up'); 
 
    $(this).find('.bottom').addClass('bottom-up'); 
 
}); 
 

 
$(".winner-container").on("mouseleave", function() { 
 
    $(this).find('.top').removeClass('top-up'); 
 
    $(this).find('.bottom').removeClass('bottom-up'); 
 
});

.winner-container { 
 
    position: relative; 
 
    box-shadow: 0px 2.5px 1px 0px rgba(0, 0, 0, 0.25); 
 
    border: 1px solid #074E68; 
 
} 
 

 
.winner-container, 
 
.top, 
 
.bottom { 
 
    width: 10em; 
 
    height: 12em; 
 
    overflow: hidden; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    height: 12em; 
 
    width: 100%; 
 
    top: 12em; 
 
    transition: 0.5s ease-in-out; 
 
} 
 

 
.top .headline { 
 
    position: absolute; 
 
    top: 2.5em; 
 
    width: 100%; 
 
    background: rgba(255, 255, 255, 0.8); 
 
    box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1); 
 
    transition: 0.5s ease-in-out; 
 
} 
 

 
.top-up .headline { 
 
    top: -2.5em; 
 
} 
 

 
.bottom-up.bottom { 
 
    top: 0em; 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="winner-container"> 
 
    <div class="top"> 
 
    <h4 class="headline">SME Example 1</h4> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div class="winner-words"> 
 
     <h6>SME Examle 1 is a technology company.</h6> 
 
     <h6><a>Learn more...</a></h6> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="winner-container"> 
 
    <div class="top"> 
 
    <h4 class="headline">SME Example 2</h4> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div class="winner-words"> 
 
     <h6>SME Examle 2 is an e-commerce company.</h6> 
 
     <h6><a>Learn more...</a></h6> 
 
    </div> 
 
    </div> 
 
</div>