Javascript 在动态if-else悬停状态数组中写入mouseout状态
我在一个数组中调用了一系列悬停状态,其中每个唯一的项都显示唯一的悬停内容(在同一个悬停类中。样式相同,但内容不同。) 更新:下面的完整JS:Javascript 在动态if-else悬停状态数组中写入mouseout状态,javascript,jquery,mouseleave,mouseout,Javascript,Jquery,Mouseleave,Mouseout,我在一个数组中调用了一系列悬停状态,其中每个唯一的项都显示唯一的悬停内容(在同一个悬停类中。样式相同,但内容不同。) 更新:下面的完整JS: $('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').hover(function(){ var location = $(this).offset();
$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').hover(function(){
var location = $(this).offset();
console.log('location: ', location);
$('.overlayContent').css({'display': 'inline-block', 'height': ($(this).height()+'px'), 'width': ($(this).width()+'px'), 'top': (location.top - $('#schlMainContent').offset().top), 'left': (location.left - $('.classicBooks').offset().left)});
$('.overlayContent', this).show();
var bookName = $(this).attr('class');
if (bookName == 'meJane') {
// links for jane
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'antarcticAntics') {
// links for antarcticAntics
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'pigeon') {
// links for pigeon
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'marchOn') {
// links for marchOn
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'nelson') {
//links for nelson
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'president') {
// links for president
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'owen') {
// links for owen
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'tealBook') {
// links for tealBook
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'children') {
// links for children
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'dot') {
// links for dot
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){ // .preview is same as openPopup
console.log('bookName: ', bookName);
openPopUp(bookName);
});
}
$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).off( "mouseleave" );
});
我需要添加一个mouseOut状态,因为当前,只有当您将鼠标悬停到下一个项目时,才能删除悬停状态。我需要它完全删除,当你鼠标离开该地区的问题。有没有关于如何通过mouseout()恢复正常状态的想法。
尝试,鼠标移动:
$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').on('mouseleave',function(){
$('.overlayContent').css({'display': 'none'});
尝试:
$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').hover(function(){
var location = $(this).offset();
console.log('location: ', location);
$('.overlayContent').css({'display': 'inline-block', 'height': ($(this).height()+'px'), 'width': ($(this).width()+'px'), 'top': (location.top - $('#schlMainContent').offset().top), 'left': (location.left - $('.classicBooks').offset().left)});
$('.overlayContent', this).show();
var bookName = $(this).attr('class');
if (bookName == 'meJane') {
// links for jane
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'antarcticAntics') {
// links for antarcticAntics
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'pigeon') {
// links for pigeon
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'marchOn') {
// links for marchOn
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'nelson') {
//links for nelson
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'president') {
// links for president
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'owen') {
// links for owen
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'tealBook') {
// links for tealBook
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'children') {
// links for children
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'dot') {
// links for dot
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){ // .preview is same as openPopup
console.log('bookName: ', bookName);
openPopUp(bookName);
});
}
$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).off( "mouseleave" );
});
另外,尝试在末尾添加另一个
} else {
$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).css({'display': 'none'});
}
});
.hover
函数实际上接受第二个参数,该参数将在鼠标悬停时调用。请查看以下代码:
$('.selectors').hover(function() {
// mouse in
$('.something').show();
}, function() {
// mouse out
$('.something').hide();
});
有关更多详细信息,请参阅手册:
这是一个非常基本的例子:刚刚试过。更新了问题完整JS。如果您看到5个以上的
else if
使用相同的代码,请尝试另一种方法/重构非常感谢这样做,我尝试将鼠标中的所有hover if语句包装为in,并创建了带有hide的新鼠标,但都被忽略了。也许因为我用if语句进行动态悬停,所以与简单的show-hide有点不同。我认为问题不在于如何在这样一个简单的场景中做到这一点,而在于我的场景中的条件。回调函数中的内容其实并不重要。尝试建立一个工作小提琴与你到目前为止,我很乐意修改和演示