27
4
我在这里试图实现的是根据其容器 children() 的数量计算每个子级的宽度和高度。
宽度=容器宽度/它的 child 数量Height = Width (or) Width*0.75 (or) Width*0.5625 '根据if条件
这是我的代码总是返回 height = tileHeightSquare
有什么想法吗？？
个人中心
文章发布
退出<style>
.container {
background-color:#FFF;
display:table;
box-sizing:border-box;
width:100%;
}
.tile {
background-color:silver;
display:table-cell;
vertical-align:middle;
text-align:center;
-moz-box-shadow: inset 0 0 0 3px #FFF;
-webkit-box-shadow: inset 0 0 0 3px #FFF;
box-shadow: inset 0 0 0 3px #FFF;
}
</style>
<HTML>
<main class="container">
<article class="tile">
<h1>A1</h1>
</article>
<article class="tile">
<h1>A2</h1>
</article>
</main>
<main class="container">
<article class="tile">
<h1>B1</h1>
</article>
<article class="tile">
<h1>B2</h1>
</article>
<article class="tile">
<h1>B3</h1>
</article>
</main>
<main class="container"></main>
</HTML>
<script>
function flexTiles() {
$('.container').each(function() {
var noOfTiles = $(this).children().length; //no of tiles in each container
var containerWidth = $(this).innerWidth(); //main container width
var tileWidth = (containerWidth / noOfTiles);
var tileHeightBox = tileWidth;
var tileHeightSquare = tileWidth * 0.75;
var tileHeightWide = tileWidth * 0.5625;
if (noOFTiles = 1) {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightWide + 'px'
});
}
if (noOFTiles = 2) {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightSquare + 'px'
});
} else {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightBox + 'px'
});
}
});
}
</script>
最佳答案
首先，您的 if 语句不检查 noOfTiles 的值，它们设置它是因为您使用的是单个 =，它总是导致表达式的计算结果为 true:
if (noOFTiles = 1) {
将其更改为比较运算符:
if (noOFTiles == 1) {
或者，更好的是，如果不需要类型强制:
if (noOFTiles === 1) {
其次，您通过测试 noOFTiles 错误地访问了 noOfTiles。
第三，您正在使用两个单独的 if 语句，因此每个语句都会运行，因为第二个语句设置了 'height': tileHeightSquare + "px"，那是你最终得到的那个。
你需要将两条语句修改为一条，像这样:
if (noOfTiles == 1) {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightWide + 'px'
});
} else if (noOfTiles == 2) {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightSquare + 'px'
});
} else {
$(this).children().css({
'width': tileWidth + 'px',
'height': tileHeightBox + 'px'
});
}
此外，为了更好的设计，请遵循 DRY(不要重复自己)的最佳实践，这使得代码库更 slim ，更容易扩展并且更不容易出现错误:
var h = tileHeightBox;
if (noOfTiles == 1) {
h = tileHeightWide;
} else if (noOfTiles == 2) {
h = tileHeightSquare;
}
$(this).children().css({
'width': tileWidth + 'px',
'height': h + 'px'
});
最后，页面中真的应该只有一个 main 元素，以保持语义的目的正确。您可能想要使用 section，如下所示:
$(flexTiles);
function flexTiles() {
$('.container').each(function() {
var noOfTiles = $(this).children().length; //no of tiles in each container
var containerWidth = $(this).innerWidth(); //main container width
var tileWidth = (containerWidth / noOfTiles);
var tileHeightBox = tileWidth;
var tileHeightSquare = tileWidth * 0.75;
var tileHeightWide = tileWidth * 0.5625;
var h = tileHeightBox;
// >>>> You had: noOFTiles, instead of noOfTiles <<<<
if(noOfTiles == 1) {
h = tileHeightWide;
} else if(noOfTiles == 2) {
h = tileHeightSquare;
}
$(this).children().css({
'width': tileWidth + 'px',
'height': h + 'px'
});
});
}<style>
.container {
background-color:#FFF;
display:table;
box-sizing:border-box;
width:100%;
}
.tile {
background-color:silver;
display:table-cell;
vertical-align:middle;
text-align:center;
-moz-box-shadow: inset 0 0 0 3px #FFF;
-webkit-box-shadow: inset 0 0 0 3px #FFF;
box-shadow: inset 0 0 0 3px #FFF;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="container">
<article class="tile">
<h1>A1</h1>
</article>
<article class="tile">
<h1>A2</h1>
</article>
</section>
<section class="container">
<article class="tile">
<h1>B1</h1>
</article>
<article class="tile">
<h1>B2</h1>
</article>
<article class="tile">
<h1>B3</h1>
</article>
</section>
<section class="container"></section>关于jquery - 根据其容器子项的数量计算 <article> 高度()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36287582/
27
4
0
我有几个带有视频和图像的 Bootstrap slider 。在 slider 之外，我想要一个可以转到包含视频的幻灯片的按钮。包含视频的幻灯片的数量因 slider 而异。我想做的是获取幻灯片的数量
我在编写一个查询时遇到了一些问题。 我有一个由文件及其大小(以字节为单位)组成的表。它看起来像这样: FileUrl | FileSize ------------------ xyz.docx |
我有一个带 iframe 的网站和一个带另一个 iframe 的网站，所以它是一个 iframe 内嵌另一个 iframe(都在不同的域上)。那么有没有办法从父div或父主div的url(parent
以下表达式在 JavaScript 中给出了特殊的结果。 typeof (5 + "7") // Gives string typeof (5 - "7") // Gives number 如
我有一个名为“交易”的表，每当有人在我的网站上进行购买时，我都会在其中输入用户 ID、购买类型和金额。 我想向每个用户显示过去 7 天的这些统计信息。 目前，我有这个: $data = array()
我一整天都在努力寻找解决这一挑战的办法。 我有一张 table : id | amount | type | date |
我正在尝试在 10 个数据节点的集群中测试 Map reduce 程序的性能。在此过程中，我使用了 5 个 Reducers，然后是 10 个等等。 我在想增加 reducer 的数量也会使工作完成得
我正在使用 html5 输入 type="number"。我想监视此输入的变化，但是: 因为在支持它的浏览器中 它有旋转控件 我不能只监视 .keyup, 因为我不想等待它失去焦点，所以我不能只监视
我的购物车表格有问题。我创建了一个如下所示的表格: SQL Fiddle 我的问题是我希望能够选择产品 ID，并计算该产品 ID 在表格中重复的次数，以便我可以显示用户在购物车中拥有的商品数量。 寻找
我使用许多包含来显示我网站的一小部分。使用许多 include 是否合适，或者我应该减少它们(尽可能多)。包含函数要多花多少时间？ 我的主页加载速度很慢。有什么方法可以让它加载更快。 (我的主页每天在
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: length of array in function argument 我的数组大小是5。例如: arrC
是否有标准的 Python 方法来处理 Python 中的物理单位/数量？我看到了来自不同领域(如物理学或神经科学)的不同模块特定解决方案。但我更愿意使用标准方法而不是“孤岛”解决方案，因为其他人应该
基本上就像标题所说的那样，有没有办法从 JavaScript 程序中查看事件循环中当前存在多少个 promise ？最好在 Deno 上。 最佳答案 Deno v1.26 添加了一个内部 API，可用
我只是想知道大型项目-比如说航空公司的预订系统，它可能有多少类/对象。 对象：客户，飞机，机场，路线，机票，订单。这就是我能想到的。该项目可能是成千上万的代码行，那么是否可能会有更多的类（执行与对象无
如果有办法限制Scala中未处理的 future 数量，我将无法提供资金。 例如下面的代码: import ExecutionContext.Implicits.global for (i
从昨天开始，我一直在努力做到这一点，尽管还没有运气。我找到了解决方案，在我想要完成的事情上总是有细微的差别。 我试图获得所有可能的组合，稍微像这样:combination_k ，但我也希望相同的项目与
我正在尝试更新 1500 个 QuickBooks Online 库存项目的现有数量。我可以从商店中提取 1500 种产品。 这个更新可以做吗？我看到手头没有数量的物品: https://develo
我想与工作人员一起扩展应用程序。 可能有 1 名 worker 或 100 名 worker ，我想无缝扩展它们。 这个想法是使用副本集。然而，由于特定领域的原因，扩展它们的适当方法是让每个工作人员知
Android Studio 有没有办法显示 XML 布局中存在的 View 数量？众所周知，布局应该包含 <=80 个 View ，因此超过此值就会出现此警告，因此告知数量会非常有帮助。 Layou
虽然编码时总是出现有关 IBOutlet 保留计数的相同问题:从 NIB 取消归档对象后保留计数？何时对 IBOutlet 使用 @property？设置时保留还是分配？ Mac 和 iPhone 之
我是一名优秀的程序员,十分优秀！