使用表达式或 jQuery 在 Laravel 刀片中更改 div 宽度答案

【问题标题】：Change div width in Laravel blade using expression or jQuery使用表达式或 jQuery 在 Laravel 刀片中更改 div 宽度
【发布时间】：2017-06-23 07:56:48
【问题描述】：

我想动态改变 div 元素的宽度值。 Div 包含块，它们的大小取决于变量。例如，如果$t->spotdiff = 2 我将有两个块在列中等分 50/50%，如果$t->spotdiff = 10，那么我将有 10 个更小的块等等......

这是我的刀：

@foreach($test as $t)
...
<table>
...
<tr>
<td>
@for($i = 0; $ i < $t->spotdiff; $i++)
    <div id="modal" data-toggle="modal" data-target="#myModal" style="cursor:pointer;float:left;background:#c0c0c0;height:18px;margin-right:1px;"></div>@endfor<span style="color:#fd8809">{{$t->spotdiff}}
@endfor
</td>
</tr>
...
</table>
...
@endforeach

我试图使用 Blade 来设置它（我实际上不确定表达式是否可以这样写）：

<div id="modal" style="witdh: {{(100 / $t->spotdiff)}}"></div>

或者使用 jQuery：

<script type="text/javascript">
    $("#modal").css("width", "{{(100 / $t->spotdiff)}}");
</script>

但没有成功。有什么想法吗？

【问题讨论】：

标签： php jquery html css laravel

【解决方案1】：

如果您不针对任何旧版浏览器，您可以轻松实现使用 CSS 和 Flexbox 等分列的效果。这为您提供了代码和视图分离的优势。

.columns {
  display: flex;
}
.columns div {
  flex: 1;
  border: 1px solid red;
}

<div class="columns">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

【讨论】：

【解决方案2】：

你有拼写错误，

1) 直接方式

<div id="modal" style="width: {{(100 / $t->spotdiff)}}px"></div>

2) 查询方式

<script type="text/javascript">
    $("#modal").css("width", "{{(100 / $t->spotdiff)}}px");
</script>

试一试，会成功的。

【讨论】：