Javascript 根据窗口大小更改div中的类(jQuery/JS)
我想根据窗口大小更改列表的类别 这是我目前的部门:Javascript 根据窗口大小更改div中的类(jQuery/JS),javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想根据窗口大小更改列表的类别 这是我目前的部门: <div> <ul id="image-holder" class="list-inline acc-list"> <li><img src="" /></li> </ul> </div> 当屏幕调整为小尺寸(即手机/平板电脑)时,我希望它将div更改为以下内容: <div> <ul id="
<div>
<ul id="image-holder" class="list-inline acc-list">
<li><img src="" /></li>
</ul>
</div>
当屏幕调整为小尺寸(即手机/平板电脑)时,我希望它将div更改为以下内容:
<div>
<ul id="image-holder" class="imageslider">
<li><img src="" /></li>
</ul>
</div>
到目前为止,我已经尝试了以下JavaScript:
$(document).ready(function(){
var $window = $(window);
// Function to handle changes to style classes based on window width
function checkWidth() {
if ($window.width() < 980) {
$('#image-holder').removeClass('acc-list').removeClass('list-inline').addClass('bxslider');
};
if ($window.width() >= 980) {
$('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
$('.imageslider').imageSlider({
slideWidth: 188,
slideHeight: 188,
slideMargin: 0,
auto: true
});
});
$(文档).ready(函数(){
变量$window=$(window);
//函数根据窗口宽度处理样式类的更改
函数checkWidth(){
如果($window.width()<980){
$('#image holder').removeClass('acc-list').removeClass('list-inline').addClass('bxslider');
};
如果($window.width()>=980){
$(“#图像持有者”).removeClass('bxslider').addClass('acc-list').addClass('list-inline');
}
}
//加载执行
检查宽度();
//绑定事件侦听器
$(窗口)。调整大小(选中宽度);
$('.imageslider').imageslider({
滑动宽度:188,
幻灯片编号:188,
幻灯片摘要:0,
自动:对
});
});
如果窗口已经达到某个大小,但在调整大小时,它无法在imageslider处于活动状态和非活动状态之间成功切换,则此操作有效
铬检验员:
<ul id="image-holder" class="acc-list list-inline" style="-webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(100px, 0px, 0px);">
<li style="width: 100px;">
<img src="img/image1.png" alt="">
<div class="acc-desc-container">
<p class="desc">blablabla</p>
<p class="price">blablalba</p>
</div>
</li>
宽度:100px;“>
blablabla
blalba
从您的文档开始,内容如下。准备就绪:
之后
变量$window=$(window)
加:
然后将checkWidth()
函数更改为类似以下内容:
function checkWidth() {
if ($window.width() < 980) {
$('#image-holder').addClass('bxslider');
if ($('#image-holder').hasClass('acc-list') && $('#image-holder').hasClass('list-inline') && $('#image-holder').hasClass('bxslider')) {
createSlider();}
$('#image-holder').removeClass('acc-list').removeClass('list-inline');
};
if ($window.width() >= 980) {
if ($('#image-holder').hasClass('bxslider')) {
rslider.destroySlider();}
$('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
}
}
函数checkWidth(){
如果($window.width()<980){
$('#image holder').addClass('bxslider');
if($('#image holder').hasClass('acc-list')&&$('#image holder').hasClass('list-inline')&&$('#image holder').hasClass('bxslider')){
createSlider();}
$(“#图像保持器”).removeClass('acc-list').removeClass('list-inline');
};
如果($window.width()>=980){
if($('#image holder').hasClass('bxslider')){
rslider.destroySlider();}
$(“#图像持有者”).removeClass('bxslider').addClass('acc-list').addClass('list-inline');
}
}
这将在屏幕移动时添加(一次),然后销毁(一次)滑块。
它创建了一个全局rslider变量来存储滑块,我删除了.imageSlider
,因为它与代码的其余部分不匹配,而且您已经调用checkWidth()
来创建滑块
这是因为imageSlider插件可能只在与选择器实际匹配的元素上运行,因此稍后添加类并不重要,每次调整大小时初始化插件似乎是个坏主意,因此您可能无法(或至少不应该)这样做。@adeneo我确实这么认为,似乎每次我都必须有效地重新加载页面,以重新检测是否使用
imageslider
标记。你认为实现这一目标的最佳方式是什么?我基本上希望我的图像在窗口较小时加载到imageslider中。我认为最好的方法是重写插件,使其按您的意愿工作,其他任何事情都可能会有问题,但我不知道imageslider插件是如何工作的,所以我可能错了。@adeneo我使用的插件是bxSlider(bxSlider.com)但我绝对没有JS专业知识来重写插件的行为不幸的是Hi@Mike这工作得很好,唯一的问题是当我将窗口放大到最大尺寸时,3个图像的布局混乱,因此3个图像都重叠,出于某种原因离开了页面,你知道吗?@germainelol-我不知道图像或页面上的css或html或其他代码的大小。当我把图像放在提琴上时,它们不会重叠或离开页面。所以我猜这与代码的其余部分有关。您可以尝试分叉小提琴并向其添加代码,直到它出现相同的错误,也许这会有所帮助?我不确定如何提供小提琴,因为我正在使用引导,而且我的文件当时非常大。我可以给你看代码,但我可以告诉你图像是188x188<代码>列表内联是一种引导功能,acc列表
只有float:left
inside@germainelol-所有这些都不会导致图像重叠或离开页面-我用这些更改更新了此处。所以它必须是代码中的其他东西。那时我肯定不知所措
function checkWidth() {
if ($window.width() < 980) {
$('#image-holder').addClass('bxslider');
if ($('#image-holder').hasClass('acc-list') && $('#image-holder').hasClass('list-inline') && $('#image-holder').hasClass('bxslider')) {
createSlider();}
$('#image-holder').removeClass('acc-list').removeClass('list-inline');
};
if ($window.width() >= 980) {
if ($('#image-holder').hasClass('bxslider')) {
rslider.destroySlider();}
$('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
}
}