在Laravel应用上使用Ajax在foreach中更改变量的值

编程问答 2022-07-24

问题描述

我的主页上有一个滑动的滑块，带有三个标签；全部，个人和企业。

Image of Slider on Homepage for visuals

我正在尝试根据单击的选项卡在foreach中更改变量的值。

AJAX

我成功地尝试了很多事情，但是我删除了最近一次进行for循环的尝试，因为它没有用，并且我不知道我是否在浪费时间尝试，因为我不知道是否可能是这样。

$('.type--services').on('click',function(){
        $('.type--services').removeClass('covers--active');
        $(this).addClass('covers--active');

        var category = $(this).data('category');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('Meta[name="csrf-token"]').attr('content')
            }
        });

        var formData = {
            category: category,};

        var type = "post";
        var ajaxurl = 'tabServices';

        $.ajax({
            type: type,url: ajaxurl,data: formData,dataType: 'json',success: function (data) {
                alert('success');
            },error: function (data) {
                alert('fail');
            }
        });
    });

控制器

public function tabServices(Request $request)
    {
        if($request['category'] == 'personal'){
            $services = Service::where('service_type_id',1)->orderBy('name','ASC')->get();
        } elseif($request['category'] == 'business'){
            $services = Service::where('service_type_id',2)->orderBy('name','ASC')->get();
        } elseif($request['category'] == 'all'){
            $services = Service::all();
        }

        return response()->json($services);
    }

滑块

<section class="covers covers-top covers-background">
    <div class="covers-inner">
        <ul class="covers-tags">
            <li><a class="type--services covers--active" data-category="all">All</a></li>
            <li><a class="type--services" data-category="personal">Personal</a></li>
            <li><a class="type--services" data-category="business">Business</a></li>
        </ul>
        <div class="covers-group covers-slider">
            @foreach($services as $service)
                <div class="cover-contain">
                    <a href="{{ route('service.index',[$service->service_type->slug,$service->slug]) }}">
                        <div class="cover">
                            <div class="cover-image" style="background-image: url('/storage/{{ $service->image }}')" role="img" aria-label="[{{ $service->image_alt }}]"></div>
                            <div class="cover-content">
                                <div class="cover-content--tags">{{ $service->service_type->name }}</div>
                                <div class="cover-content--title">{{ $service->name }}</div>
                                <div class="cover-content--link">
                                    <img src="/assets/vectors/icons/right_arrow_pink.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxjavascriptlaravellaravelslick.js