'how can i change my list view in javascript

Hello dear stackoverflow users. I'm trying to make a view mode with javascript. When 3-fold view is selected, I will list my product cards as 3, when 4-fold is selected, when 4-fold is selected, I will list them individually. I tried for this, but a new class name is added while the class name I gave to the product card should be deleted and a new one should be added. I am open to your suggestions for alternative solutions for this. Good forums.

My html code :

     <div class="flex items-center space-x-4">
                                <label for="triple" class="regulation">
                                    <input type="radio" checked id="triple" class="hidden" name="regulation"
                                        data-view="3">
                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect width="5" height="5" fill="black" />
                                        <rect y="7" width="5" height="5" fill="black" />
                                        <rect y="14" width="5" height="5" fill="black" />
                                        <rect x="7" width="5" height="5" fill="black" />
                                        <rect x="7" y="7" width="5" height="5" fill="black" />
                                        <rect x="7" y="14" width="5" height="5" fill="black" />
                                        <rect x="14" width="5" height="5" fill="black" />
                                        <rect x="14" y="7" width="5" height="5" fill="black" />
                                        <rect x="14" y="14" width="5" height="5" fill="black" />
                                    </svg>
                                </label>
                                <label for="quaternary" class="regulation">
                                    <input type="radio" id="quaternary" class="hidden" name="regulation" data-view="4">
                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect width="4" height="4" fill="black" />
                                        <rect y="5" width="4" height="4" fill="black" />
                                        <rect y="10" width="4" height="4" fill="black" />
                                        <rect y="15" width="4" height="4" fill="black" />
                                        <rect x="5" width="4" height="4" fill="black" />
                                        <rect x="5" y="5" width="4" height="4" fill="black" />
                                        <rect x="5" y="10" width="4" height="4" fill="black" />
                                        <rect x="5" y="15" width="4" height="4" fill="black" />
                                        <rect x="10" width="4" height="4" fill="black" />
                                        <rect x="10" y="5" width="4" height="4" fill="black" />
                                        <rect x="10" y="10" width="4" height="4" fill="black" />
                                        <rect x="10" y="15" width="4" height="4" fill="black" />
                                        <rect x="15" width="4" height="4" fill="black" />
                                        <rect x="15" y="5" width="4" height="4" fill="black" />
                                        <rect x="15" y="10" width="4" height="4" fill="black" />
                                        <rect x="15" y="15" width="4" height="4" fill="black" />
                                    </svg>
                                </label>
                                <label for="single" class="regulation">
                                    <input type="radio" class="hidden" id="single" class="hidden" name="regulation"
                                        data-view="1">
                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect width="19" height="5" fill="black" />
                                        <rect y="7" width="19" height="5" fill="black" />
                                        <rect y="14" width="19" height="5" fill="black" />
                                    </svg>
                                </label>
                            </div>

 <div id="replaceableGrid" class="grid gap-10 mt-5" style="grid-template-columns: repeat(3,1fr);">
                    <div class="w-full border border-[#D6D6D6] item">
                        <div class="relative w-full border-b border-[#D6D6D6]">
                            <img src="assets/images/img/viktoria-sprey-kumas-boyasi-pembe-3a8dbb 2.png" alt="">
                            <a href="#" class="absolute top-0 right-0 transform -translate-x-[10px] translate-y-[10px]">
                                <img src="assets/images/svg/favorite-gray.svg" alt="">
                            </a>
                        </div>
                        <div class="p-2.5">
                            <span class="text-xs text-[#858585] font-medium">Marka</span>
                            <h2 class="font-semibold text-black">Viktoria Pembe Toz Kumaş Boyası</h2>
                            <span class="text-[18px] font-semibold block mt-px">₺1,099</span>
                            <div class="flex items-center space-x-[5px] mt-[7px]">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                            </div>
                            <a href="#"
                                class="w-full flex justify-center items-center text-center h-10 border border-[#F90656] text-[#F90656] text-sm font-medium mt-3 hover:btn-hover focus:btn-focus">
                                İncele
                            </a>
                        </div>
                    </div>
                    <div class="w-full border border-[#D6D6D6] item">
                        <div class="relative w-full border-b border-[#D6D6D6]">
                            <img src="assets/images/img/viktoria-sprey-kumas-boyasi-pembe-3a8dbb 2.png" alt="">
                            <a href="#" class="absolute top-0 right-0 transform -translate-x-[10px] translate-y-[10px]">
                                <img src="assets/images/svg/favorite-gray.svg" alt="">
                            </a>
                        </div>
                        <div class="p-2.5">
                            <span class="text-xs text-[#858585] font-medium">Marka</span>
                            <h2 class="font-semibold text-black">Viktoria Pembe Toz Kumaş Boyası</h2>
                            <span class="text-[18px] font-semibold block mt-px">₺1,099</span>
                            <div class="flex items-center space-x-[5px] mt-[7px]">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                            </div>
                            <a href="#"
                                class="w-full flex justify-center items-center text-center h-10 border border-[#F90656] text-[#F90656] text-sm font-medium mt-3 hover:btn-hover focus:btn-focus">
                                İncele
                            </a>
                        </div>
                    </div>
                    <div class="w-full border border-[#D6D6D6] item">
                        <div class="relative w-full border-b border-[#D6D6D6]">
                            <img src="assets/images/img/viktoria-sprey-kumas-boyasi-pembe-3a8dbb 2.png" alt="">
                            <a href="#" class="absolute top-0 right-0 transform -translate-x-[10px] translate-y-[10px]">
                                <img src="assets/images/svg/favorite-gray.svg" alt="">
                            </a>
                        </div>
                        <div class="p-2.5">
                            <span class="text-xs text-[#858585] font-medium">Marka</span>
                            <h2 class="font-semibold text-black">Viktoria Pembe Toz Kumaş Boyası</h2>
                            <span class="text-[18px] font-semibold block mt-px">₺1,099</span>
                            <div class="flex items-center space-x-[5px] mt-[7px]">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                            </div>
                            <a href="#"
                                class="w-full flex justify-center items-center text-center h-10 border border-[#F90656] text-[#F90656] text-sm font-medium mt-3 hover:btn-hover focus:btn-focus">
                                İncele
                            </a>
                        </div>
                    </div>
                    <div class="w-full border border-[#D6D6D6] item">
                        <div class="relative w-full border-b border-[#D6D6D6]">
                            <img src="assets/images/img/viktoria-sprey-kumas-boyasi-pembe-3a8dbb 2.png" alt="">
                            <a href="#" class="absolute top-0 right-0 transform -translate-x-[10px] translate-y-[10px]">
                                <img src="assets/images/svg/favorite-gray.svg" alt="">
                            </a>
                        </div>
                        <div class="p-2.5">
                            <span class="text-xs text-[#858585] font-medium">Marka</span>
                            <h2 class="font-semibold text-black">Viktoria Pembe Toz Kumaş Boyası</h2>
                            <span class="text-[18px] font-semibold block mt-px">₺1,099</span>
                            <div class="flex items-center space-x-[5px] mt-[7px]">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-yellow.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                                <img src="assets/images/svg/star-gray.svg" alt="" style="width: 15px;">
                            </div>
                            <a href="#"
                                class="w-full flex justify-center items-center text-center h-10 border border-[#F90656] text-[#F90656] text-sm font-medium mt-3 hover:btn-hover focus:btn-focus">
                                İncele
                            </a>
                        </div>
                    </div>
                </div>

MY JS CODE : (JQUERY)

    let replaceGridLabels = $(".regulation");
jQuery.each(replaceGridLabels, function (i, val) {
  $(replaceGridLabels[i]).click(function () {
    $("#replaceableGrid").css(
      "grid-template-columns",
      `repeat(${$(this).children().attr("data-view")},1fr)`
    );
    $("#replaceableGrid .item").addClass(
      `grid-item-${$(this).children().attr("data-view")}`
    );
  });
});

MY CSS FRAMEWORK İS TAİLWİNDCSS

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'how can i change my list view in javascript

Sources

Related Questions