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

时间:2018-05-07 07:44:52

标签: javascript php jquery laravel laravel-5

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

代码可能会更好地澄清:

    package main

    import (
     "fmt"
        "gopkg.in/mgo.v2"
        "gopkg.in/mgo.v2/bson"

    )
func GetAll()[]interface{}{
           //Data Base Instance
        session, err := mgo.Dial("localhost")
        c := session.DB("yourDbName").C("YourCollectionName")
            foo := "bar"
            orQuery := []bson.M{}
            uidFindQuery := bson.M{uuid: foo}
            nameFindQuery := bson.M{name: foo}
            orQuery = append(orQuery, uidFindQuery, nameFindQuery)
             result := []interface{}{}
            err := c.Find(bson.M{"$or":orQuery}).All(&result);
           fmt.Println("error", err)
           fmt.Println("Your expected Data",result)
           return result

   } `

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

@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

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

$('.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);
});

问题

如何阅读会话并使用会话中存储的ID将该类添加到卡中,以便当该人离开页面并返回时,他们可以看到他们选择了哪些卡片?

提前致谢

1 个答案:

答案 0 :(得分: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在会话中并且加载页面时,将添加该类,如果它不在会话中,则不会添加该类。

让我知道结果..