jQuery怎么實現(xiàn)產品對比功能

這篇文章主要介紹“jQuery怎么實現(xiàn)產品對比功能”，在日常操作中，相信很多人在jQuery怎么實現(xiàn)產品對比功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery怎么實現(xiàn)產品對比功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

產品對比相信大家并不陌生，為了方便用戶對類似產品的相關信息進行有效直觀的對比，一些電商網(wǎng)站產品或評測網(wǎng)站會為用戶提供產品對比的功能，用戶只需勾選多個需要對比的產品，就可以進行比對。本文將使用jQuery來給大家講解如何實現(xiàn)產品對比功能。

HTML

HTML結構我們分三部分，第一是產品列表部分，展示所有可以對比的產品。我們以某手機網(wǎng)站為例，簡單的結構，只需展示產品圖片和名稱，以及一個添加按鈕。注意我們把手機的相關參數(shù)信息都放在屬性data-*里，等會后面展示對比信息的時候會用到。

$(document).on('click', '.cmprBtn', function () {
        if ($(".cmprBtn").hasClass("active")) {
            /* this is to print the  features list statically*/
            $(".contentPop").append('<p class="col-md-3 compareItemParent relPos">' + '<ul class="product"><li class=" relPos compHeader">產品信息</li><li>名稱</li><li>屏幕大小</li><li>重量</li><li>系統(tǒng)</li><li class="cpu">CPU</li><li>電池容量</li></ul></p>');

            for (var i = 0; i < list.length; i++) {
                /* this is to add the items to popup which are selected for comparision */
                product = $('.selectProduct[data-title="' + list[i] + '"]');
                var image = $('[data-title=' + list[i] + ']').find(".productImg").attr('src');
                var title = $('[data-title=' + list[i] + ']').attr('data-id');
                /*appending to p*/
                $(".contentPop").append('<p class="col-md-3 compareItemParent relPos">' + '<ul class="product">' + '<li class="compHeader"><img src="' + image + '" class="compareThumb"></li>' + '<li>' + title + '</li>' + '<li>' + $(product).data('size') + '</li>' + '<li>' + $(product).data('weight') + '</li><li>'+ $(product).data('os') +'</li><li class="cpu">' + $(product).data('processor') + '</li>' + '<li>' + $(product).data('battery') + '</ul>' + '</p>');
            }
        }
        $(".modPos").show();
    });
然后，產品信息展示出來了，點擊右上角的“x”號，會關閉彈出層，并且清除比對框中的內容。
$(document).on('click', '.modal-closebtn', function () {
        $(".contentPop").empty();
        $(".comparePan").empty();
        $(".comparePanle").hide();
        $(".modPos").hide();
        $(".selectProduct").removeClass("selected");
        $(".cmprBtn").attr('disabled', '');
        list.length = 0;
        $(".rotateBtn").toggleClass("rotateBtn");
    });
最后，我們在比對框中也可以移除比對的產品，點擊比對產品框中的“x“號，會移除對應的產品。
$(document).on('click', '.selectedItemCloseBtn', function () {
        var test = $(this).siblings("p").attr('id');
        $('[data-title=' + test + ']').find(".addToCompare").click();
        hideComparePanel();
    });
    function hideComparePanel() {
        if (!list.length) {
            $(".comparePan").empty();
            $(".comparePanle").hide();
        }
    }

到此，關于“jQuery怎么實現(xiàn)產品對比功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>