1

Доброго времени! Такой вопрос по верстке.

Сайт на laravel, через @foreach перебираются блоки статей на главной странице, отличаются блоки положением текста и картинки. И вот задача: предположим, есть один <div class="first">, а другой <div class="second">. Как можно реализовать условие через if? То есть, предположим i=1, это <class="first">, i=2, это <class="second">, ну и, естественно else - error. И в первый div попадает одна статья, во второй другая. Или не через i, а как-то в условии прописать css класс. Не совсем понимаю, какой в данном случае синтаксис будет.

Ещё подробнее постараюсь объяснить: Разница в классах - разница в отображении контекста. class="first" - первая статья: идет "текст - картинка", class="first" - вторая статья: "картинка - текст". Нужно вывести это всё через if :)

А главный вопрос, вообще реально через if прописывать css классы, возможна ли такая реализация? За ранее, большое спасибо!!!

3
  • вопрос что сначала показывать картинку или текст для четных и нечетных блоков можно наверное и чисто средствами css решить?
    – teran
    Commented 18 апр. 2018 в 19:02
  • Но мне нужно через условие, если такой класс, то в начале идёт "текст - картинка", если другой класс, то "картинка - текст". и так далее, на странице 10 блоков. Можно как-то это реализовать и как?
    – Armida
    Commented 18 апр. 2018 в 19:08
  • это я понял. и говорю вам, что альтернативно, можно с помощью css вообще без этих классов реализовать. в зависимости от сложности верстки, конечно.
    – teran
    Commented 19 апр. 2018 в 6:43

1 ответ 1

0

Можно добавить переменную-счётчик, и вычислять значение по модулю. Этот демо-пример, можно скопировать целиком в отдельный шаблон, и на его основе дописать ваш файл:

@php
    $css = ['first', 'second'];
    $array = range(1, 10);
    $i = 0;
@endphp

@foreach($array as $string)
    <div class="{{$css[$i++ % 2]}}">{{$string}}</div>
@endforeach

В результате в исходном коде вы увидите теги:

<div class="first">1</div>
<div class="second">2</div>
<div class="first">3</div>
<div class="second">4</div>
<div class="first">5</div>
<div class="second">6</div>
<div class="first">7</div>
<div class="second">8</div>
<div class="first">9</div>
<div class="second">10</div>
6
  • 3
    а нельзя ли просто написать <div class="{{ $loop->index % 2 ? "first" : "second" }}"> ?
    – teran
    Commented 19 апр. 2018 в 6:49
  • 1
    либо $cls = ["first", "second"] и class="{{ $cls[$loop->index%2] }}">
    – teran
    Commented 19 апр. 2018 в 6:52
  • @teran благодарю :) С массивом стилей действительно компактней выглядит. Commented 19 апр. 2018 в 7:31
  • Огромное спасибо за столь развернутый ответ!!!)
    – Armida
    Commented 19 апр. 2018 в 16:45
  • @Armida если моё решение вам подходит, вы можете отметить его галкой :) Commented 19 апр. 2018 в 16:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.