Question

我正在开展项目，我希望将 #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

任何帮助都将受到高度赞赏。

Answer 1

这样的事情：

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;

FIDDLE

编辑：这样的事情会更有活力

var sW = $("#screen").width(),

$('.snapcord').each(function() {
 var W = $(this).width();
    sW = sW>=W-5 && sW<=W+5 ? W : sW;
});

jQuery将div宽度设置为最接近的变量，如snapTo

1 个答案: