我正在开展项目,我希望将 #screen 宽度修改为其他最接近的宽度(div.snapcord)
我的DOM是这样的......
HTML:
<div id="iphone3" class="snapcord"></div>
<div id="iphone4" class="snapcord"></div>
<div id="ipad" class="snapcord"></div>
<div id="screen"></div>
CSS
#iphone3 { width: 320px }
#iphone4 { width: 480px }
#ipad { width: 768px }
#screen 的动态宽度介于300px到780px之间。我希望 #screen 宽度 snapTo 其他(div.snapcord)的最近宽度 snapTolerance为5px ;
说,
#screen 宽度 315px 或 325px 然后我想将其修改为 320px
#screen 宽度 475px 或 485px 然后我想将其修改为 480px
#screen 宽度 763px 或 773px 然后我想将其修改为 768px ( snapTolerance仅限5px
否则,将 #screen 宽度保留为原始值。
我正在学习jQuery&amp;已设法使用以下代码段获取每个div.snapcord的宽度。
$('.snapcord').each(function() {
var getWidth = $(this).width();
alert(getWidth);
});
但我不清楚如何进一步行动......
这是Fiddle
任何帮助都将受到高度赞赏。
答案 0 :(得分:2)
这样的事情:
var sW = $('#screen').width();
sW = sW>=315 && sW<=325 ? 320 : sW;
sW = sW>=375 && sW<=385 ? 480 : sW;
sW = sW>=763 && sW<=773 ? 768 : sW;
编辑: 这样的事情会更有活力
var sW = $("#screen").width(),
$('.snapcord').each(function() {
var W = $(this).width();
sW = sW>=W-5 && sW<=W+5 ? W : sW;
});