LaravelBlade對于每個回圈交替顯示-有解無憂

我想以一種很好的方式展示我的刀片視圖。

第一個 id，它將在左側顯示影像，在右側顯示內容。

第二個id，它將在右側顯示影像，在左側顯示內容。但我不知道如何回圈這個。，第三個 id 它將再次在左側顯示影像，在右側顯示內容，依此類推。

有人可以幫忙嗎？謝謝

@foreach ($users as $user)
    <div class="box-border flex flex-col items-center content-center px-8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16">

        <!-- Image on the left-->
        <div class="box-border relative w-full max-w-md px-4 mt-5 mb-4 -ml-5 text-center bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
            <img src="{{$user->image}}" hljs-number">2 pl-6 pr-5 xl:pl-16 xl:pr-20 ">
        </div>

        <!-- Content on the right-->
        <div hljs-number">1/2 md:pl-10 md:order-none">
            <h2 hljs-number">0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
                 {{$user->title}}
            </h2>
            <p hljs-number">4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-12 xl:pr-32 lg:text-lg">
                 {{$user->body}}
            </p>
            <ul hljs-number">0 m-0 leading-6 border-0 border-gray-300">
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_1}}
                </li>
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_2}}
                </li>
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span>  {{$user->sub_2}}
                </li>
            </ul>
        </div>
        <!-- End  Content -->
    </div>
    <div hljs-number">8 mx-auto mt-2 leading-6 text-black border-0 border-gray-300 border-solid md:mt-20 xl:mt-0 md:flex-row max-w-7xl lg:px-16">

        <!-- Content on left-->
        <div hljs-number">1/2 md:pl-6 xl:pl-32">
            <h2 hljs-number">0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
               {{$user->title}}
            </h2>
            <p hljs-number">4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-10 lg:text-lg">
                 {{$user->body}}
            </p>
            <ul hljs-number">0 m-0 leading-6 border-0 border-gray-300">
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span>  {{$user->sub_1}}
                </li>
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_2}}
                </li>
                <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                    <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_2}}
                </li>
            </ul>
        </div>
        <!-- End  Content -->

        <!-- Image on the right-->
        <div hljs-number">4 mt-10 mb-4 text-center bg-no-repeat bg-contain border-solid md:mt-0 md:max-w-none lg:mb-0 md:w-1/2">
            <img src="{{$user->image}}" hljs-number">4 sm:pr-10 xl:pl-10 lg:pr-32">
        </div>
    </div>
@endforeach

uj5u.com熱心網友回復：

在刀片回圈內部，您可以訪問可用于檢查當前索引是否為或的$loop變數。oddeven

@foreach ($users as $user)
    @if($loop->even) 
       {{-- The index is event --}}
    @else 
       {{-- The index is odd --}}
    @endif
@endforeach

或者

@foreach ($users as $user)
    @if($loop->odd) 
       {{-- The index is odd --}}
    @else 
       {{-- The index is even --}}
    @endif
@endforeach

uj5u.com熱心網友回復：

您可以在回圈中使用條件。喜歡：

if($key % 2 == 0){
   // show right image and left content part
} else {
   // show left image and right content part
}

更新后的檔案：

@foreach ($users as $key => $user)
    @if($key % 2 == 0)
        <div class="box-border flex flex-col items-center content-center px-8 mx-auto mt-2 leading-6 text-black border-0 border-gray-300 border-solid md:mt-20 xl:mt-0 md:flex-row max-w-7xl lg:px-16">

            <!-- Content on left-->
            <div class="box-border w-full text-black border-solid md:w-1/2 md:pl-6 xl:pl-32">
                <h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
                    {{$user->title}}
                </h2>
                <p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-10 lg:text-lg">
                    {{$user->body}}
                </p>
                <ul class="p-0 m-0 leading-6 border-0 border-gray-300">
                    <li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
                        <span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">?</span></span>  {{$user->sub_1}}
                    </li>
                    <li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
                        <span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">?</span></span> {{$user->sub_2}}
                    </li>
                    <li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
                        <span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">?</span></span> {{$user->sub_2}}
                    </li>
                </ul>
            </div>
            <!-- End  Content -->

            <!-- Image on the right-->
            <div class="box-border relative w-full max-w-md px-4 mt-10 mb-4 text-center bg-no-repeat bg-contain border-solid md:mt-0 md:max-w-none lg:mb-0 md:w-1/2">
                <img src="{{$user->image}}" hljs-number">4 sm:pr-10 xl:pl-10 lg:pr-32">
            </div>
        </div>
    @else
        <div hljs-number">8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16">

            <!-- Image on the left-->
            <div hljs-number">4 mt-5 mb-4 -ml-5 text-center bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
                <img src="{{$user->image}}" hljs-number">2 pl-6 pr-5 xl:pl-16 xl:pr-20 ">
            </div>

            <!-- Content on the right-->
            <div hljs-number">1/2 md:pl-10 md:order-none">
                <h2 hljs-number">0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
                    {{$user->title}}
                </h2>
                <p hljs-number">4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-12 xl:pr-32 lg:text-lg">
                    {{$user->body}}
                </p>
                <ul hljs-number">0 m-0 leading-6 border-0 border-gray-300">
                    <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                        <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_1}}
                    </li>
                    <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                        <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span> {{$user->sub_2}}
                    </li>
                    <li hljs-number">1 pl-0 text-left text-gray-500 border-solid">
                        <span hljs-number">6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span hljs-string">">?</span></span>  {{$user->sub_2}}
                    </li>
                </ul>
            </div>
            <!-- End  Content -->
        </div>
@endforeach

uj5u.com熱心網友回復：

這比你想象的要容易。您只需要使用一個只能在 @foreach 中訪問的變數，即$loop. 此變數帶有許多有用的屬性，您可以在此處閱讀，但您需要的是$loop->even和$loop->odd。再加上在類中創建條件的三元運算子和順風對專案重新排序的能力，這應該很容易管理，而無需復制任何代碼。

@foreach($users as $user)
    <div class="{{$loop->odd ? "order-first" : "order-last"}}">image</div>
    <div hljs-variable">$loop->even ? "order-first" : "order-last"}}">content</div>
@endforeach()

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/426306.html

標籤：拉拉维尔 laravel-刀片

上一篇：Laravel：有人知道如何從資料庫中獲取api嗎？

下一篇：Laravel9SymfonyMailer錯誤-電子郵件必須有“收件人”、“抄送”或“密件抄送”標題