javascript - Bagaimanakah data tidak boleh dipaparkan secara kumulatif selepas mengklik butang secara berterusan?

Question

Saya baru-baru ini menghadapi masalah semasa membuat halaman web Terdapat berbilang produk dipaparkan dalam rajah pemandangan halaman Setiap kali produk diklik, senarai maklumat yang sepadan dengan produk ini akan dipaparkan di bawah rajah pemandangan.

Masalah yang saya hadapi sekarang ialah: apabila saya memuat semula halaman dan mengklik pada produk untuk kali pertama, senarai maklumatnya akan dipaparkan seperti biasa tanpa menyegarkan halaman, apabila saya mengklik pada produk yang sama untuk kali kedua, ia senarai maklumat akan dipaparkan secara kumulatif.

Maafkan saya, bagaimana saya boleh mengklik produk beberapa kali tanpa memuat semula halaman dan hanya memaparkan senarai maklumatnya sekali?

Berikut ialah tangkapan skrin dan kod saya:

Klik butang ini buat kali pertama untuk memaparkan senarai produknya seperti biasa:

Jika anda mengklik butang ini dua kali berturut-turut tanpa memuat semula halaman, senarai produk akan dipaparkan secara kumulatif pada asas asal:

Struktur data saya adalah seperti ini:

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

Masalahnya sekarang ialah tatasusunan ContentList, yang terus dipaparkan berulang kali.
JS saya ditulis seperti ini:

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

        });
    }
}

Bolehkah mana-mana tuan memberi saya nasihat tentang cara saya perlu mengubah suai kod asal!

Answer 1

Dalam kebanyakan kes, cuba elakkan berbilang append, yang juga dipanggil mengelakkan operasi berulang pada elemen DOM beberapa kali Anda boleh melakukan ini:

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

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

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

Biasanya, saya cadangkan anda menggunakan struktur kod di atas untuk apa-apa sahaja yang besar seperti fail, sebesar kelas, atau sekecil fungsi, iaitu 声明 - 逻辑 - 返回值 Dengan cara ini, ia dijamin bahawa pembolehubah boleh dikawal, dicari, dan boleh diindeks. Titik putus boleh digunakan apabila ralat logik berlaku, dan hasil pelaksanaan akhir kod semasa boleh dilihat sepintas lalu!

Answer 2

Tambah baris kod sebelum gelung for dalam lampiran
detailList.html('')