💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ Arezoo74kh
بخش مشاهده سریع
جامعه پی اچ پی ایجاد شده در ۲۴ بهمن ۱۴۰۰

سلام بخش مشاهده سریع رو میشه ی راهنمایی بفرمایین چجوری حلش کرد ؟؟

سلام و عرض ادب، من با جی کوئری هندلش کردم.

بخش html:

    <div class="row isotope-grid">
    @foreach($products as $product)
            <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category{{ $product->category_id }}">
                
                <div class="block2">
                    <div class="block2-pic hov-img0">
                        <img src="/{{ $product->demo_url }}" alt="IMG-PRODUCT">
                        <a href="#"
                           class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
                           data-id="{{ $product->id }}"
                           data-demo-url="{{ $product->demo_url }}"
                           data-title="{{ $product->title }}"
                           data-description="{{ $product->description }}"
                           data-price="{{ $product->price }}"
                        >
                            مشاهده سریع
                        a>
                    div>
                    <div class="block2-txt flex-w flex-t p-t-14">
                        <div class="block2-txt-child1 flex-col-l ">
                            <a href="{{ route('home.products.show',$product->id) }}"
                               class="mtext-106 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"
                               target="_blank">
                                {{ $product->title }}
                            a>
                            <span class="stext-105 cl3">
   {{ $product->price }} هزار تومان
span>
                        div>
                    div>
                div>
            div>
        @endforeach
    div>

بخش modal:

<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
    <div class="overlay-modal1 js-hide-modal1">div>
    <div class="container">
        <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
            <button class="how-pos3 hov3 trans-04 js-hide-modal1">
                <img src="/images/icons/icon-close.png" alt="CLOSE">
            button>
            <div class="row">
                <div class="col-md-6 col-lg-7 p-b-30">
                    <div class="p-l-25 p-r-30 p-lr-0-lg">
                        <div class="wrap-slick3 flex-sb flex-w">
                            <div class="wrap-slick3-dots">div>
                            <div class="wrap-slick3-arrows flex-sb-m flex-w">div>
                            <div class="slick3 gallery-lb">
                                <div class="item-slick3 modal-small-image" data-thumb="#">
                                    <div class="wrap-pic-w pos-relative">
                                        <img src="#" alt="IMG-PRODUCT" class="modal-demo-url">
                                        <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04 modal-image-expand"
                                           href="#" class="modal-demo-url">
                                            <i class="fa fa-expand">i>
                                        a>
                                    div>
                                div>
                            div>
                        div>
                    div>
                div>
                <div class="col-md-6 col-lg-5 p-b-30">
                    <div class="p-l-50 p-t-5 p-lr-0-lg">
                        <h4 class="mtext-105 cl2 js-name-detail p-b-14" id="modal-title">h4>
                        <span class="mtext-106 cl2" id="modal-price">span>
                        <p class="stext-102 cl3 p-t-23" id="modal-description">p>
                        
                        <div class="p-t-33">
                            <div class="flex-w flex-r-m p-b-10">
                                <div class="flex-w flex-m respon6-next">
                                    <a
                                        class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail"
                                        href="#" id="modal-add-to-basket">
                                        افزودن به سبد خرید
                                    a>
                                div>
                            div>
                        div>
                    div>
                div>
            div>
        div>
    div>
div>

بخش اسکریپت جی کوئری:

    <script type="text/javascript">
        /*==================================================================
[ Show modal1 ]*/
        $(document).ready(function () {
            $('.js-show-modal1').on('click', function (e) {
                e.preventDefault();
                // get product data from selected product
                let productId = $(this).data('id');
                let productTitle = $(this).data('title');
                let productDescription = $(this).data('description');
                let productPrice = $(this).data('price');
                let productDemoUrl = $(this).data('demo-url');
                // set gotten data to modal
                $('#modal-title').html(productTitle);
                $('#modal-price').html(productPrice + ' تومان');
                $('#modal-description').html(productDescription);
                $('.modal-demo-url').attr("src", productDemoUrl);
                $('.modal-side-image').attr("src", productDemoUrl);
                $('.modal-image-expand').attr("href", productDemoUrl);
                if(!productPrice){
                    $('#modal-add-to-basket').attr("href", "user/products/source-url/download/" + productId);
                    $('#modal-add-to-basket').html("دانلود فایل اصلی");
                }else{
                    $('#modal-add-to-basket').attr("href", "{{ route('home.products.all') }}/" + productId + "/addToBasket");
                    $('#modal-add-to-basket').html("افزودن به سبد خرید");
                }
                // show modal
                $('.js-modal1').addClass('show-modal1');
            });
            $('.js-hide-modal1').on('click', function () {
                $('.js-modal1').removeClass('show-modal1');
            });
        });
    script>


پویا پارسایی ۲۶ بهمن ۱۴۰۰، ۱۵:۵۷

جی کوئری مشکل ندارع!

Amir Eb ۲۸ بهمن ۱۴۰۲، ۲۳:۴۱