categories.blade中每个类别的背景色自定义字段(从管理面板到视图)(laravel，controller)

Question

大家好，我想为我在管理面板中添加的每个类别添加一个特定的背景

我有两个字段：开表示名称，第二个字段表示图像

我想添加第三个字段(选择框(，该字段用于选择类别颜色。

当我从选择框中选择一种颜色时，它将是类别中的背景。当然，每个类别都有颜色(我们可以使用函数来添加Id='$color'，通过这种方式，每个类别HAVE Id=HAVE color(

-类别刀片(管理员(：

{{ Form::open(['class' => 'form-horizontal', 'files' => true]) }}

<div class="form-group {{ $errors->has('category_name')? 'has-error':'' }}">
<label for="category_name" class="col-sm-4 control-label">@lang('app.category_name')</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="category_name" value="{{ old('category_name') }}" name="category_name" placeholder="@lang('app.category_name')"> {!! $errors->has('category_name')? '
<p class="help-block">'.$errors->first('category_name').'</p>':'' !!} </div></div>


<div class="form-group {{ $errors->has('image')? 'has-error':'' }}">
<label for="image" class="col-sm-4 control-label">@lang('app.image')</label>
<div class="col-sm-8">
<input type="file" name="image" id="image" class="form-control"> {!! $errors->has('image')? '
<p class="help-block">'.$errors->first('image').'</p>':'' !!} </div></div>

• 类别控制器：

public function category($category_name){  return view('content.category' , compact('post'));
}
public function index(){
$title = trans('app.categories');
$categories = Category::all();

return view('admin.categories', compact('title', 'categories'));
}


public function store(Request $request)
{
$rules = [
'category_name' => 'required',
'image'         => 'image'
];
$this->validate($request, $rules);

$slug = str_slug($request->category_name);
$duplicate = Category::where('category_slug', $slug)->count();
if ($duplicate > 0){
return back()->with('error', trans('app.category_exists_in_db'));
}

/**
* Upload image if any
*/
$image_name = '';
if ($request->hasFile('image')){
$upload_dir = public_path('uploads/images/');
if ( ! file_exists($upload_dir)){
mkdir($upload_dir, 0777, true);
}

$image = $request->file('image');
$file_base_name = str_replace('.'.$image->getClientOriginalExtension(), '', $image->getClientOriginalName());
$resized = Image::make($image)->resize(300, 200);

$image_name = strtolower(time().str_random(5).'-'.str_slug($file_base_name)).'.' . $image->getClientOriginalExtension();
$imageFileName = $upload_dir.$image_name;

try{
$resized->save($imageFileName);
} catch (Exception $e){
return $e->getMessage();
}
}

$data = [
'category_name' => $request->category_name,
'category_slug' => $slug,
'image' => $image_name,
];

Category::create($data);
return back()->with('success', trans('app.category_created'));
}

• 类别刀片视图：

<a href="{{route('single_category', [$cat->id, $cat->category_slug])}}">
<div  class="wow flipInY col-md-2 col-sm-6 col-xs-12 col-center">
<div class="home-category-box">
<img id="" src="{{ $cat->get_image_url() }}" />
<div class="title">
<a href="{{route('single_category', [$cat->id, $cat->category_slug])}}">{{ 
$cat->category_name }}</a>

Answer 1

首先，您必须将选择框添加到表单中：

<div class="form-group {{ $errors->has('color')? 'has-error':'' }}">
<label for="color" class="col-sm-4 control-label">@lang('app.color')</label>
<div class="col-sm-8">
<select name="color" id="color" class="form-control" onchange="setColor()">
<option value="red">Red</option>
<option value="green">Blue</option>
<option value="blue">Blue</option>
</select>
{!! $errors->has('image')? '<p class="help-block">'.$errors->first('image').'</p>':'' !!}
</div>
</div>

然后添加一些JavaScript将选择框的背景颜色更改为所选颜色：

<script type="text/javascript">
function setColor() {
document.getElementById("color").setAttribute("style", "background-color: " + document.getElementById("color").value);
}
</script>