Laravel Javascript - 检查会话中是否存在主题，添加类

Question

我正在开发一个用户可以选择产品并转到下一页的系统。然后使用laravel会话将该产品保存在会话中。当用户决定转到下一页并返回时。所选产品确实保存在会话中，但是他们无法看到他们选择了哪种产品，因为该类未应用于所选产品。

代码可以更好地澄清它：

@foreach($themes as $theme)
    <div class="col-md-4 mb-4">
        <div class="card theme-card card-hover depth-2 border-0" id="theme-id-{{$theme->id}}">
            <a href="" class="theme-link" data-toggle="modal" data-target="#theme{{ $theme->id }}">
               <div class="card-image" style="height: 200px; background-image: url('/uploads/{{ $theme->thumbnail }}'); background-size: cover; background-position: center center;"></div>
               <div class="card-body">
                    <div class="row">
                        <div class="col-md-2 vertical-center">
                            <i class="fab fa-magento fa-lg"></i>
                        </div>
                        <div class="col-md-10">
                            <p class="m-0">{!! str_limit($theme->name, $limit =  32, $end = '...') !!}</p>
                            <small class="text-muted">{{ $theme->productable_type }}</small>
                        </div>
                    </div>
                </div>
            </a>
            <div class="card-footer bg-white border-0 text-right pt-0">
                <div class="row">
                    <div class="col-md-6 text-left">
                        <input type="hidden" class="theme-name" name="theme[{{$theme->id}}]">
                        {{--<input type="hidden" value="{{ $theme->composer_package }}">--}}
                        <button data-card-id="{{$theme->id}}"  class="btn btn-orange btn-sm btn-theme-choice">Kiezen</button>
                    </div>
                    <div class="col-md-6 text-right">
                       <span style="font-size: 20px;" >€ {{ $theme->price }} EUR</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

在上面的代码中，我为每一个所谓的“主题”，我将主题的ID作为数据目标和ID。然后在我的Javascript代码中，我执行以下操作：

$('.btn-theme-choice').on('click', function (event) {

    event.preventDefault();
    newSelectedCardId = $(event.target).data('card-id');

    if(cardId === null) {
        cardId = newSelectedCardId;
    } else if (cardId !== newSelectedCardId) {
        $('#theme-id-' + cardId).removeClass('theme-chosen').find("input[name='theme["+cardId+"]']").val('');
        cardId = null;
    }

    var card = $('#theme-id-' + cardId );
    card.toggleClass('theme-chosen');
    selectedCardInput = card.find("input[name='theme["+cardId+"]']");

    if( !$('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('');

    } else if ( $('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('selected');
    }

    console.log(selectedCardInput);
});

在这里，我将该类添加到卡中，以便用户可以看到他们选择了哪张卡。然后使用控制器中的一些PHP代码将此选择保存在会话中

if( $theme == null ) {

    return redirect('plugins');

} elseif( $theme != null ) {

    foreach($this->predefinedArray as $value) {
        $request->session()->put('chosen_theme.' . $value, $theme->$value);
    }

    $request->session()->put('chosen_theme.composer_package', $theme->productable->composer_package);

    return redirect('plugins');
}

问题

如何阅读会话并使用存储在会话中的ID将类添加到卡中，这样如果该人离开页面并返回，他们可以看到他们选择了哪些卡？

提前致谢

Answer 1

在您的视图中尝试这个..

<div class="card theme-card card-hover depth-2 border-0 {{ \Session::get('chosen_theme.composer_package') == $theme->id ? 'theme-chosen' : '' }}" id="theme-id-{{$theme->id}}">

每当主题id在会话中并且加载页面时，将添加该类，如果它不在会话中，则不会添加该类。

让我知道结果..