式またはjQueryを使用して、Laravelブレードのdivの幅を変更します。

Question

div要素の幅の値を動的に変更します。 Divにはブロックがあり、そのサイズは変数に依存します。私は2つのブロックが列に均等に50分の50％に分けなければならないと思い$t->spotdiff = 2場合例えば、$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 

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

またはjQueryを使って：

は、私はそれが（表現は、このように書くことができれば、私は実際にはよく分からない）ブレードを使用して設定しようとしていました0

しかし成功なし。何か案は？

Answer 1

あなたはスペルの間違いを持っ​​て

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

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

、

1）直接的な方法

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

2）jQueryのWAY

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

G試してみてください、それは動作します。

Answer 2

レガシーブラウザをターゲットにしない場合は、CSSとFlexboxで列を均等に広げるという効果を簡単に達成できます。これにより、コードとビュー分離の利点が得られます。