Мы можем объединить две коллекции, используя sub-запрос mongoDB. Вот пример, Комментарии -
`db.commentss.insert([
{ uid:12345, pid:444, comment:"blah" },
{ uid:12345, pid:888, comment:"asdf" },
{ uid:99999, pid:444, comment:"qwer" }])`
Пользователи -
db.userss.insert([
{ uid:12345, name:"john" },
{ uid:99999, name:"mia" }])
Суб-запрос MongoDB для JOIN -
`db.commentss.find().forEach(
function (newComments) {
newComments.userss = db.userss.find( { "uid": newComments.uid } ).toArray();
db.newCommentUsers.insert(newComments);
}
);`
Получить результат из недавно созданная коллекция -
db.newCommentUsers.find().pretty()
Результат -
`{
"_id" : ObjectId("5511236e29709afa03f226ef"),
"uid" : 12345,
"pid" : 444,
"comment" : "blah",
"userss" : [
{
"_id" : ObjectId("5511238129709afa03f226f2"),
"uid" : 12345,
"name" : "john"
}
]
}
{
"_id" : ObjectId("5511236e29709afa03f226f0"),
"uid" : 12345,
"pid" : 888,
"comment" : "asdf",
"userss" : [
{
"_id" : ObjectId("5511238129709afa03f226f2"),
"uid" : 12345,
"name" : "john"
}
]
}
{
"_id" : ObjectId("5511236e29709afa03f226f1"),
"uid" : 99999,
"pid" : 444,
"comment" : "qwer",
"userss" : [
{
"_id" : ObjectId("5511238129709afa03f226f3"),
"uid" : 99999,
"name" : "mia"
}
]
}`
Надеюсь, что это поможет.
Это работает, но вы пытаетесь показать div
, который уже виден. Я думаю, что вы пытаетесь показать <p>
. Используйте $('#details p').show(500)
в коде, как показано ниже.
$(document).ready(function() {
$('#box').hover(function() {
$('#details p').show(500);
})
})
Вы хотите отобразить абзац внутри div (#details p
вместо просто #detail
), так как именно это скрыто в первую очередь.
Отредактировано с 2 полями:
$(document).ready(function() {
$('.box').hover(function() {
$(this).find('.details p').show(500);
$(this).addClass('highlighted');
})
})
.box .details p {
font-size: 14px;
display: none;
}
.highlighted {
background-color: purple;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="col-lg-2 box">
<div class="imgBox">
<img class="product-mouseover" src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
<div class="details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
</div>
<div class="col-lg-2 box">
<div class="imgBox">
<img class="product-mouseover" src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
<div class="details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
</div>
Вы показываете div детали при наведении на изображение, но p внутри все еще скрыто. Переместить отображение: нет с p на .box .details.
Слово о hover()
Вызов
blockquote>$( selector ).hover( handlerIn,handlerOut)
является сокращением для:$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut )
;, поэтому вам нужно два обработчика в
hover()
и Вы используете только один. добавить обработчик для mouseleave. то есть:$(document).ready(function() { $('#box').hover(function() { $('#details').show(500); }, function() { $('#details').hide(500); }) })
для получения дополнительной информации о hover () https://api.jquery.com/hover/
, если вы просто хотите показать на mouseenter используйте
mouseenter()
https://api.jquery.com/mouseenter/