если значение равно «{{user-> experience}}», добавьте класс «active» для метки laravel или javascript

Question

Как добавить 'active' в класс меток, как после проверки значения из базы данных с помощью laravel {{$ user-> experience}}.если значение - начальный уровень, добавьте 'active' к классу меток.

Вот мой HTML-контент

<div class="btn-group" data-toggle="buttons">

            <label class="btn btn-success active" for="option1">
                <input type="radio" name="experience" id="option1" value="Student">Student
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-primary" for="option2">
                <input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-info" for="option3">
                <input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-default" for="option4">
                <input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-warning" for="option5">
                <input type="radio" name="experience" id="option5" value="Manager">Manager
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-danger" for="option6">
                <input type="radio" name="experience" id="option6" value="Director" >Director
                <span class="glyphicon glyphicon-ok"></span>
            </label>

        </div>

Вот мой css

.btn span.glyphicon {         
  opacity: 0;
}
.btn.active span.glyphicon {        
  opacity: 1;       
}

Мое значение laravelfetch

{{$user->experience}}

Mysql 'user' Table

 - id      name         experience

 - 1       john         Entry-Level

Answer 1

Вы можете использовать ternary operators для достижения своей цели.

<label 
    class="btn btn-success {{$user->experience == 'Entry-Level' ? 'active' : ''}}"
    for="option1"
>

Answer 2

Используйте троичный оператор для переключения активного класса и отмеченного атрибута

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success {{$user->experience == 'Student'?'active':''}}" for="option1">
        <input type="radio" name="experience" id="option1" {{$user->experience == 'Student'?'checked':''}} value="Student">Student
        <span class="glyphicon glyphicon-ok"></span>
    </label>

    <label class="btn btn-primary {{$user->experience == 'Entry-Level'?'active':''}}" for="option2">
        <input type="radio" name="experience" id="option2" {{$user->experience == 'Entry-Level'?'checked':''}} value="Entry-Level">Entry-Level
        <span class="glyphicon glyphicon-ok"></span>
    </label>

    <label class="btn btn-info {{$user->experience == 'Mid-Level'?'active':''}}" for="option3">
        <input type="radio" name="experience" id="option3" {{$user->experience == '>Mid-Level'?'checked':''}} value="Mid-Level">Mid-Level
        <span class="glyphicon glyphicon-ok"></span>
    </label>

    <label class="btn btn-default {{$user->experience == 'Senior-Level'?'active':''}}" for="option4">
        <input type="radio" name="experience" id="option4" {{$user->experience == 'Senior-Level'?'checked':''}} value="Senior-Level">Senior-Level
        <span class="glyphicon glyphicon-ok"></span>
    </label>

    <label class="btn btn-warning {{$user->experience == 'Manager'?'active':''}}" for="option5">
        <input type="radio" name="experience" id="option5" {{$user->experience == 'Manager'?'checked':''}} value="Manager">Manager
        <span class="glyphicon glyphicon-ok"></span>
    </label>

    <label class="btn btn-danger {{$user->experience == 'Director'?'active':''}}" for="option6">
        <input type="radio" name="experience" id="option6" {{$user->experience == 'Director'?'checked':''}} value="Director" >Director
        <span class="glyphicon glyphicon-ok"></span>
    </label>
</div>

Answer 3

Вы можете использовать троичный оператор для достижения этого или вы можете использовать If.

{{$user->experience == 'Entry-Level'?'active':''}}

Вот пример.

<div class="btn-group" data-toggle="buttons">

            <label class="btn btn-success {{$user->experience == 'Entry-Level'?'active':''}}" for="option1">
                <input type="radio" name="experience" id="option1" value="Student">Student
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-primary" for="option2">
                <input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-info" for="option3">
                <input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-default" for="option4">
                <input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-warning" for="option5">
                <input type="radio" name="experience" id="option5" value="Manager">Manager
                <span class="glyphicon glyphicon-ok"></span>
            </label>

            <label class="btn btn-danger" for="option6">
                <input type="radio" name="experience" id="option6" value="Director" >Director
                <span class="glyphicon glyphicon-ok"></span>
            </label>

        </div>