javascript - How can the data not be displayed cumulatively after clicking the button continuously?

Question

I encountered a problem recently when I was working on a web page. There are multiple products displayed in the scene diagram of a page. Every time a product is clicked, the information list corresponding to this product will be displayed under the scene diagram.

The problem I am encountering now is: Refresh the page and click on a product for the first time, and its information list will be displayed normally; without refreshing the page, when you click on the same product for the second time, its information list will be accumulated. show.

Excuse me, how can I click on a product multiple times without refreshing the page and only display its information list once?

The following is my screenshot and code:

Click this button for the first time to display its product list normally:

Without refreshing the page, if you click this button twice in a row, its product list will be displayed cumulatively on the original basis:

My data structure is like this:

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. '
        }
    }
}]

The problem now is the contentList array, which keeps displaying repeatedly.
My JS is written like this:

$(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;
            }

        });
    }
}

Could any master please give me some advice on how I should modify the original code? Thank you!

Answer 1

In most cases, try to avoid multiple append, which is also called avoiding repeated operations on DOM elements multiple times. You can do this:

// 声明
var $detailList = $('.detail-list'),
    detailInner = '';

// 逻辑
for(var j = 0; j < contentList.length; j++) {
    detailInner += '<li>'+ contentList[j].info +'</li>';
}

// 返回值
$detailList.html(detailInner);

Usually, I suggest you use the above code structure for anything as large as a file, as large as a class, or as small as a function, which is declaration - logic - return value This way, it ensures that the variables are controllable and queryable , indexable, guaranteed breakpoints for logic errors, and the final execution result of the current code is clear at a glance!

Answer 2

Add a line of code before the for loop of append
detailList.html('')