bounty将在6天后过期。回答此问题可获得+50的声望奖励。broken heart正在寻找规范答案。
我有一个要添加图像的表
public function up()
{
Schema::create('blog_images', function (Blueprint $table) {
$table->BigIncrements('id');
$table->string('image', 128);
$table->timestamps();
});
}
在此表中,我添加了一列,您可以在其中更改true或false的值
$table->boolean('border')->default(true);
然后,在控制器中,我将添加一个开关,以便可以更改此值
protected function grid()
{
$grid = new Grid(new BlogImage());
$grid->column('border', __('Border'))->switch();
$grid->column('image', __('Image'))->image();
return $grid;
}
这应该很清楚了,我有一个要切换的字段,在数据库中,该字段的值为0或1
接下来,在页面上显示这些图像
@foreach($blog_images as $blog_image)
<div class="main-image">
<img src="/storage/{{ $blog_image->image }}">
</div>
@endforeach
这里我有一个主图像类,它有以下样式:
.main-image {
position: relative;
img {
width: 100%;
}
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid red;
}
}
这里是样式border: 3px solid red;
我需要使它在border字段为true时,将此样式应用于该类,如果为false,则不应相应应用
但是我还不知道在哪里做
有没有可能在控制器中完成这个操作,或者我需要使用javascript。在这里如何做得更好?
1条答案
按热度按时间rkue9o1l1#
这可以通过检查
$blog_image->border
来完成,如果为真,则添加第二个类。从原始
main-image
中删除边框,然后添加main-image-border
,如下所示。现在,所有包含div的图像都将具有
main-image
类,只有border属性为true的图像才会接收main-image-border
并应用红色边框。