获取cookie值后,jquery hover不起作用
我有一个项目列表,带有用于列表视图、图库和网格的视图切换器获取cookie值后,jquery hover不起作用,jquery,function,cookies,hover,carousel,Jquery,Function,Cookies,Hover,Carousel,我有一个项目列表,带有用于列表视图、图库和网格的视图切换器 <div class="theView"> <div class="galS active" id="gal"><span><img src="layout/cyt/img/blank.gif"></span>Galerie</div> <div class="mosS" id="mos"><span><img src=
<div class="theView">
<div class="galS active" id="gal"><span><img src="layout/cyt/img/blank.gif"></span>Galerie</div>
<div class="mosS" id="mos"><span><img src="layout/cyt/img/blank.gif"></span>Mosaik</div>
<div class="listS" id="list"><span><img src="layout/cyt/img/blank.gif"></span>Liste</div>
</div>
<div id="itemcontainer">
<div class="con">
<div class="item_page_item list"> //list,mos,gal
<div class="item sale"><span class="number">1</span>
<div class="pos">
<div class="inner">
<div class="itemImg Img123"></div>
...
</div>
</div>
</div>
</div>
</div>
当首先打开列表视图并更改为网格或图库时,带有集成旋转木马的悬停窗格不会打开,在所有其他情况下,一切正常
以下是悬停函数的代码:
$(".item_page_item.mos").hover(function(){
$(this).find(".pane").stop(true, true).fadeIn();
$("#paneImg",this).carouFredSel({
responsive: true,
circular: false,
auto: false,
items: {
visible: 1,
width: 299,
height: 241
},
scroll: {
fx: 'directscroll'
}
});
$("#paneThumb",this).carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 5
},
width: 51,
height: 42
}
});
$('#paneThumb a',this).click(function() {
$('#paneImg').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#paneThumb a').removeClass('selected');
$(this).addClass('selected');
return false;
});
},function(){
$(this).find(".pane").stop(true, true).fadeOut(200, function() {
$("#paneImg",this).trigger("destroy", true);
});
});
悬停时,覆盖层会在带有旋转木马(caroFredsel)的项目上淡出
唯一的问题是,当我将列表视图保存在cookie中,用此视图打开页面并更改为其他视图时,它不起作用
希望你能帮我,我快疯了
用于读取cookie值的函数:
$(function() {
var cc = $.cookie("theView");
if (cc == "g") {
$(".item_page_item").removeClass("list");
$(".item_page_item").removeClass("mos");
$(".item_page_item").addClass("gal");
$("#gal").addClass("active");
$("#list").removeClass("active");
$("#mos").removeClass("active");
} else if (cc == "m") {
$(".item_page_item").removeClass("gal");
$(".item_page_item").removeClass("list");
$(".item_page_item").addClass("mos");
$("#mos").addClass("active");
$("#gal").removeClass("active");
$("#list").removeClass("active");
} else if (cc == "l") {
$(".item_page_item").removeClass("gal");
$(".item_page_item").removeClass("mos");
$(".item_page_item").addClass("list");
$("#list").addClass("active");
$("#gal").removeClass("active");
$("#mos").removeClass("active");
}
});
您可以使用委托测试这段代码,也许您的问题来自这里:{替换您的悬停处理程序}
$(document).on('mouseenter mouseout', '.item_page_item.mos', function (e) {
if (e.type === 'mouseenter') {
$(this).find(".pane").stop(true, true).fadeIn();
$("#paneImg", this).carouFredSel({
responsive: true,
circular: false,
auto: false,
items: {
visible: 1,
width: 299,
height: 241
},
scroll: {
fx: 'directscroll'
}
});
$("#paneThumb", this).carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 5
},
width: 51,
height: 42
}
});
$('#paneThumb a', this).click(function () {
$('#paneImg').trigger('slideTo', '#' + this.href.split('#').pop());
$('#paneThumb a').removeClass('selected');
$(this).addClass('selected');
return false;
});
} else {
$(this).find(".pane").stop(true, true).fadeOut(200, function () {
$("#paneImg", this).trigger("destroy", true);
});
}
});
从cookie加载时是否触发了悬停事件?我添加了读取cookie的功能,希望对您有所帮助。我在代码中没有看到任何“.item\u page\u item.mos”元素添加了一些html代码。这是我删除和添加不同项目视图的类列表、mos或gal的部分。我已经尝试过这样做。似乎工作,但悬停窗格只是闪烁很短。
$(document).on('mouseenter mouseout', '.item_page_item.mos', function (e) {
if (e.type === 'mouseenter') {
$(this).find(".pane").stop(true, true).fadeIn();
$("#paneImg", this).carouFredSel({
responsive: true,
circular: false,
auto: false,
items: {
visible: 1,
width: 299,
height: 241
},
scroll: {
fx: 'directscroll'
}
});
$("#paneThumb", this).carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 5
},
width: 51,
height: 42
}
});
$('#paneThumb a', this).click(function () {
$('#paneImg').trigger('slideTo', '#' + this.href.split('#').pop());
$('#paneThumb a').removeClass('selected');
$(this).addClass('selected');
return false;
});
} else {
$(this).find(".pane").stop(true, true).fadeOut(200, function () {
$("#paneImg", this).trigger("destroy", true);
});
}
});