laravel 商品详情切换skus写发

2018年9月7日作者张舫

1.遍历好数据skus数据

@foreach($product->skus as $sku)
    <label class="btn btn-default sku-btn"
           data-price="{{ $sku->price }}"
           data-stock="{{ $sku->stock }}"
           data-toggle="tooltip"
           title="{{ $sku->description }}"
           data-placement="bottom">
        <input type="radio" name="skus" autocomplete="off" value="{{ $sku->id }}">
        {{ $sku->title }}
    </label>
@endforeach

@foreach($product->skus as $sku)

<label class="btn btn-default sku-btn"

data-price="{{ $sku->price }}"

data-stock="{{ $sku->stock }}"

data-toggle="tooltip"

title="{{ $sku->description }}"

data-placement="bottom">

</label>

@endforeach

2.准备好切换

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});                       //tooltip是app.js自带的方法展示鼠标在上面展示详情的方法
        $('.sku-btn').click(function () {                                               //鼠标点击事件
            $('.product-info .price span').text($(this).data('price'));                 //更新价钱 ,获取数据data-price
            $('.product-info .stock').text('库存：' + $(this).data('stock') + '件');     //获取件数 ,获取数据 data-stock
        });
    });
</script>

$(document).ready(function () {

$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}); //tooltip是app.js自带的方法展示鼠标在上面展示详情的方法

$('.sku-btn').click(function () { //鼠标点击事件

$('.product-info .price span').text($(this).data('price')); //更新价钱 ,获取数据data-price

$('.product-info .stock').text('库存：' + $(this).data('stock') + '件'); //获取件数 ,获取数据 data-stock

});

</script>

关于作者

张舫

好好学习天天向上

laravel 商品详情切换skus写发

1.遍历好数据skus数据

2.准备好切换

关于作者

发表评论 取消回复

发表评论取消回复