Question

我在这里想要实现的是根据每个孩子的容器子数（）来计算每个孩子的宽度和高度。

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

Answer 1

首先，您的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（不要重复自己）的最佳实践，这样可以实现更轻薄的代码库，更容易扩展，并且不易出错：

    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>

Answer 2

正如Scott在他的回复中提到的，你的代码失败的原因是因为if-else语句中的语法错误。但是我觉得这个功能可以通过不重复这么多而写得更好。

我的意思是你应该尽量避免尝试重复代码，并保持代码DRY（https://en.wikipedia.org/wiki/Don%27t_repeat_yourself）

在您的代码中，您可以像这样应用DRY原则：

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'
        });
    });
}

正如您所看到的，更清晰的代码，更具可读性：）

小提琴：https://jsfiddle.net/2o4bdp3c/1/

根据Container子集的数量计算<article>高度（）

2 个答案: