javascript - 連續點擊按鈕後，如何不會累積資料？

最近做網頁時遇到一個問題，一個頁面的場景圖中有多個產品顯示，每點擊一個產品，就會在場景圖下顯示這個產品對應的資訊清單。

我現在遇到的問題是：刷新頁面，第一次點擊一個產品，它的資訊清單可以正常顯示；不刷新頁面，第二次再點周同一個產品時，它的資訊清單會累積顯示。

請問，怎麼可以在不刷新頁面時，多次點擊產品，只顯示一次它的資訊清單？

下面是我的截圖與程式碼：

第一次點選這個按鈕，可以正常顯示它的產品清單：

#在不刷新頁面時，連續點擊兩次這個按鈕，則會在原來的基礎上，累加顯示它的產品列表：

##我的資料結構是這樣的：

var productDataList = [{
    superView: {
        img: './img/SuperView.png',
        title: 'SuperView',
        url: 'http://www.beta.anviz.com/en-us/product/View/id/388450.html',
        subTitle: 'Professional HD Box Network Camera',
        titleContent: 'SuperView is a professional series, equipped with high sensitivity sensors. SuperView offers low noise, high quality images in low-light conditions. A variety of optional professional-grade lenses and the optional protective casing allow SuperView to operate efficiently under extreme conditions. In addition, the wide range of remote back focus function makes the operation and maintenance not easier. It is perfect for securing locations such as industrial sites, school grounds, parking lot, and railway stations.',
        contentList: [{
                'info': 'Professional-grade lenses'
            },
            {
                'info': 'Remote/Auto back focus'
            },
            {
                'info': 'High-performance Wi-Fi with external antenna'
            },
            {
                'info': 'Smart edge storage'
            },
            {
                'info': 'Multiple interface of audio and alarm'
            },
            {
                'info': 'Super Low Light: Cameras can provide excellent images even in total darkness'
            },
            {
                'info': 'ABF/Automatic Focusing Button: SuperView series supports remotely adjust the back focus and automatic focus which provides an easier installation and more accurate focus'
            },
            {
                'info': 'Super Wide Dynamic Range: Catch more details in both extremely dark and bright environmernts'
            }
        ],
        thumbnail: {
            img: './img/icon/9-01.png',
            titel: 'SuperView',
            thumbnailDec: 'SuperView is a professional series, equipped with high sensitivity sensors. SuperView offers low noise, high quality images in low-light conditions. '
        }
    }
}]

現在有問題的是 contentList 這個數組，它不停的重複顯示。我的JS是這樣寫的：

$(document).ready(function() {
    $('.js-box').click(function(e) {
        var proDescribe = $('.pro-describe');
        for(var i = 0; i < productDataList.length; i++) {
            if(productDataList) {
                var item = productDataList[i];
                if(index == '0') {
                    var superView = item.superView;
                    if(superView != 'undefined') {
                        itemShow(superView);
                    }
                } 
            }
    });
}

//这是出问题的方法，但是这不知道该怎么改？
function itemShow(item) {

    var proDescribe = $('.pro-describe');
    var systemProductDec = $('.system-product-dec');
    var detailContent = $('.detail-content');
    //thumbnail
    var systemDetailDec = $('.system-detail-dec');
    var learnMore = $('#learnMore');
    var entiry = {};

    if(item) {
        var proImg = item.img;
        var title = item.title;
        var subTitle = item.subTitle;
        var titleContent = item.titleContent;
        var url = item.url;

        var contentList = item.contentList;

        for(var j = 0; j < contentList.length; j++) {
            var contentItem = contentList[j].info;
            var detailList = $('.detail-list');
            //**应该就是这里出了问题，每次点击之后，所有的 li 标签都会 append 到 detaiList 这个容器中**
            detailList.append('<li>' + contentItem + '</li>');
        }

        var thumbnail = item.thumbnail;
        var thumbnailImg = thumbnail.img;
        var thumbnailTitel = thumbnail.titel;
        var thumbnailDec = thumbnail.thumbnailDec;

        proDescribe.find('.pro-img').attr('src', proImg);
        proDescribe.find('.detail-title').text(title);
        proDescribe.find('.detail-sub-title').text(subTitle);
        proDescribe.find('.detail-content').text(titleContent);

        systemProductDec.find('.js-thumbnail-img').attr('src', thumbnailImg);
        systemProductDec.find('.js-thumbnail-title').text(thumbnailTitel);
        systemProductDec.find('.js-thumbnail-dec').text(thumbnailDec);

        detailContent.after(detailList);
        proDescribe.append(systemDetailDec);

        learnMore.click(function() {
            if(url) {
                location.href = url;
            } else {
                return false;
            }

        });
    }
}

請哪位大師指點一下,我在原程式碼中該怎麼修改? 謝謝!

typecho2730 天前827

javascript - 連續點擊按鈕後，如何不會累積資料？

全部回覆(2)我來回復