Jquery 计算<；文章>；高度基于其容器子级的数量（）_Jquery_Html_Css

Jquery 计算<；文章>；高度基于其容器子级的数量（）

jquery html css

Jquery 计算<；文章>；高度基于其容器子级的数量（）,jquery,html,css,Jquery,Html,Css,我在这里试图实现的是根据每个子容器的子容器的数量（）计算每个子容器的宽度和高度宽度=容器宽度/其子容器的数量高度=宽度（或）宽度*0.75（或）宽度*0.5625'，基于if条件这是我的代码总是返回height=tileHeightSquare 有什么想法吗 <style> .container { background-color:#FFF; display:table; box-sizing:border-box; width:100%; } .tile { backgr

我在这里试图实现的是根据每个子容器的子容器的数量（）计算每个子容器的宽度和高度

宽度=容器宽度/其子容器的数量高度=宽度（或）宽度*0.75（或）宽度*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>


.集装箱{
背景色：#FFF；
显示：表格；
框大小：边框框；
宽度：100%；
}
.瓷砖{
背景颜色：银色；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
-moz盒阴影：插入0 3px#FFF；
-webkit盒阴影：插入0 3px#FFF；
盒影：插入0 3px#FFF；
}
A1
A2
地下一层
地下二层
地下三层
函数flexTiles（）{
$（'.container'）。每个（函数（）{
var noOfTiles=$（this）.children（）.length；//每个容器中的瓷砖数量
var containerWidth=$（this）.innerWidth（）；//主容器宽度
变量tileWidth=（集装箱宽度/方便面）；
var tileHeightBox=tileWidth；
var tileHeightSquare=tileWidth*0.75；
var tileHeightWide=tileWidth*0.5625；
if（noOFTiles=1）{
$（this.children（）.css）({
“宽度”：波浪宽度+“px”，
“高度”：tileHeightWide+“px”
});
}
如果（noOFTiles=2）{
$（this.children（）.css）({
“宽度”：波浪宽度+“px”，
“高度”：平铺高度正方形+“px”
});
}否则{
$（this.children（）.css）({
“宽度”：波浪宽度+“px”，
“高度”：tileHeightBox+“px”
});
}
});
}

首先，如果您的

语句没有检查noOfTiles
的值，它们会设置它，因为您使用的是singl'e=
，这总是会导致表达式的计算结果为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'
        });
    }

function flexTiles() {
    $('.container').each(function() {
        var $this = $(this), // cache the dom-element
            noOfTiles = $this.children().length,
            containerWidth = $this.innerWidth(),
            tileWidth = (containerWidth / noOfTiles),
            tileHeightBox = tileWidth, // I dont mind this redeclaring
            tileHeightSquare = tileHeightBox * 0.75, // But for readability you should use tileHeightBox here instead of tileWidth
            tileHeightWide = tileHeightBox * 0.5625,
            thisTileHeight;

        // I assume the only outcome of noOfTiles is 1, 2 or 3. So I would rather use a switch/case
        switch(noOfTiles) {
             case 1:
                 thisTileHeight = tileHeightWide;
                 break;

             case 2:
                 thisTileHeight = tileHeightSquare;
                 break;

             case 3:
                 thisTileHeight = tileHeightBox;
                 break;
        }

        // Then change the css
        $this.children().css({
            'width': tileWidth + 'px',
            'height': thisTileHeight + 'px'
        });
    });
}

此外，为了更好的设计，请遵循DRY的最佳实践（不要重复您自己的做法），这将使代码库更精简，更易于扩展，更不容易出现错误：
    var h = tileHeightBox;

    if (noOfTiles == 1) {
            h = tileHeightWide;
    } else if (noOfTiles == 2) {
            h = tileHeightSquare;
    }

    $(this).children().css({
        'width': tileWidth + 'px',
        'height': h + 'px'
    });

最后，一个页面中应该只有一个main
元素来保持语义的正确性。您可能需要使用部分
，如我在下面所示：

$（flexTiles）；
函数flexTiles（）{
$（'.container'）。每个（函数（）{
var noOfTiles=$（this）.children（）.length；//每个容器中的瓷砖数量
var containerWidth=$（this）.innerWidth（）；//主容器宽度
变量tileWidth=（集装箱宽度/方便面）；
var tileHeightBox=tileWidth；
var tileHeightSquare=tileWidth*0.75；
var tileHeightWide=tileWidth*0.5625；
var h=tileHeightBox；
//>>>>你有：noOFTiles，而不是Scott在回答中提到的noOFTiles，你的代码失败的原因是因为if-else语句中的语法错误。但是我认为没有什么值得的。如果不重复那么多，这个函数可以写得更好
我的意思是，您应该避免尽可能多地重复代码，并保持代码干燥（）
在您的代码中，您可以像这样应用DRY原则：
    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'
        });
    }

function flexTiles() {
    $('.container').each(function() {
        var $this = $(this), // cache the dom-element
            noOfTiles = $this.children().length,
            containerWidth = $this.innerWidth(),
            tileWidth = (containerWidth / noOfTiles),
            tileHeightBox = tileWidth, // I dont mind this redeclaring
            tileHeightSquare = tileHeightBox * 0.75, // But for readability you should use tileHeightBox here instead of tileWidth
            tileHeightWide = tileHeightBox * 0.5625,
            thisTileHeight;

        // I assume the only outcome of noOfTiles is 1, 2 or 3. So I would rather use a switch/case
        switch(noOfTiles) {
             case 1:
                 thisTileHeight = tileHeightWide;
                 break;

             case 2:
                 thisTileHeight = tileHeightSquare;
                 break;

             case 3:
                 thisTileHeight = tileHeightBox;
                 break;
        }

        // Then change the css
        $this.children().css({
            'width': tileWidth + 'px',
            'height': thisTileHeight + 'px'
        });
    });
}

如您所见，代码更清晰，可读性更高：）
Fiddle:
谢谢你的回答，当我更改比较运算符时，没有添加任何样式：（@Mazen查看我关于你的多个if
语句的更新答案。再次感谢你提供了更干净的代码，但它仍然不起作用：（当我使用正确的逻辑运算符“=”时，css样式根本不适用。当我只使用“=”时它将为中的所有对象应用平铺权重正方形document@Mazen您的最后一期错误地将noOfTiles
变量大写。我上面的代码片段现在可以使用了。请查找上面包含的HTML