javascript - jQuery代码未正确扫描需要简化它(jQuery code not scanned properly need to simplify it)

Question

I am trying to setup a tracking for each element in the main navigation.(我正在尝试为主导航中的每个元素设置跟踪。)

Everything is working fine, but at some point I started getting the error that the code couldnt be read.(一切工作正常，但是在某个时候我开始收到无法读取代码的错误。)

I know that the error is showing up because for every element I am calling it again using 'jQuery':(我知道错误正在显示，因为对于每个元素，我都使用'jQuery'再次调用它：)

// MAIN CATEGORIES 

// COLLECTION MAIN
    jQuery("#heading-163").one("click", function(e) {
            console.log('category collection tracked');
           exponea.track('main_collection', {
                    action: 'click'
            });
        });

// SLNECNE OKULIARE MAIN
    jQuery("#heading-3").one("click", function(e) {
            console.log('[Jarik was here] category sunglasses tracked');
           exponea.track('main_sunglasses', {
                    action: 'click'
            });
        });

// DIOPTRICKE OKULIARE MAIN
    jQuery("#heading-9").one("click", function(e) {
            console.log('category glasses tracked');
           exponea.track('main_glasses', {
                    action: 'click'
            });
        });

// LYZIARSKE MAIN
    jQuery("#heading-14").one("click", function(e) {
            console.log('category snow goggles tracked');
           exponea.track('main_snow_goggles', {
                    action: 'click'
            });
        });     

// SPORTOVE MAIN
    jQuery("#heading-38").one("click", function(e) {
            console.log('category sportove tracked');
           exponea.track('main_sportove', {
                    action: 'click'
            });
        });     

// ZNACKY MAIN
    jQuery("#heading-48").one("click", function(e) {
            console.log('category brands tracked');
           exponea.track('main_brands', {
                    action: 'click'
            });
        });   

// OUTLET MAIN
    jQuery("#heading-114").one("click", function(e) {
            console.log('category outlet tracked');
           exponea.track('main_outlet', {
                    action: 'click'
            });
        });

    jQuery("#heading-114 > div > div > div > a.outlet_text > img").on("click", function(e) {
            console.log('category outlet left img');
           exponea.track('main_outlet_left_img', {
                    action: 'click'
            });
        });
    jQuery("#heading-114 > div > div > div > a:nth-child(3) > img ").on("click", function(e) {
            console.log('category outlet right img');
           exponea.track('main_outlet_right_img', {
                    action: 'click'
            });
        });

    jQuery('#heading-114 > div > div > div > a:nth-child(3) > button').on("click", function(e) {
            console.log('category outlet btn');
           exponea.track('main_outlet_btn', {
                    action: 'click'
            });
        });

my question is, how do I unite this, so I dont have to call the new element everytime with 'jQuery'?(我的问题是，如何将其结合起来，所以我不必每次都用“ jQuery”调用新元素？)

Thank you.(谢谢。)

// edit:(//编辑：)

this is the error code, it appears after I cross certain lines of code and then the whole code stops working(这是错误代码，在我跨过某些代码行之后出现，然后整个代码停止工作)

  ask by Jaroslav Melich translate from so

Answer 1

Ok so here's my stab in the dark...(好吧，这是我在黑暗中的刺...)

Not knowing much about your situation I've come up with the below code.(我不太了解您的情况，因此提出了以下代码。)

I've basically put the config for each tracking event into an array for looping through calling the same piece of code for each time.(我基本上已经将每个跟踪事件的配置放入数组中，以便每次都调用同一段代码来循环。)

It might be a bit overkill and get messy with future variations but it's something ˉ\_(ツ)_/ˉ(可能有点矫kill过正，并且对将来的变化感到混乱，但这有点ˉ\ _（ツ）_ /)

The method property in the config objects relates to the function you are calling for each item eg jQuery('#heading-163').one(...) vs jQuery('#heading-114 > div > div > div > a.outlet_text > img').on(...)(config对象中的method属性与您要为每个项目调用的函数相关，例如jQuery('#heading-163').one(...) vs jQuery('#heading-114 > div > div > div > a.outlet_text > img').on(...))

var trackingMap = [

    // COLLECTION MAIN
    {
        selector: '#heading-163',
        track: 'main_collection',
        method: 'one'
    },

    // SLNECNE OKULIARE MAIN
    {
        selector: '#heading-3',
        track: 'main_sunglasses',
        method: 'one'
    },

    // DIOPTRICKE OKULIARE MAIN
    {
        selector: '#heading-9',
        track: 'main_glasses',
        method: 'one'
    },

    // LYZIARSKE MAIN
    {
        selector: '#heading-14',
        track: 'main_snow_goggles',
        method: 'one'
    },

    // SPORTOVE MAIN
    {
        selector: '#heading-38',
        track: 'main_sportove',
        method: 'one'
    },

    // ZNACKY MAIN
    {
        selector: '#heading-48',
        track: 'main_brands',
        method: 'one'
    },

    // OUTLET MAIN
    {
        selector: '#heading-114',
        track: 'main_outlet',
        method: 'one'
    },
    {
        selector: '#heading-114 > div > div > div > a.outlet_text > img',
        track: 'main_outlet_left_img',
        method: 'on'
    },
    {
        selector: '#heading-114 > div > div > div > a:nth-child(3) > img',
        track: 'main_outlet_right_img',
        method: 'on'
    },
    {
        selector: '#heading-114 > div > div > div > a:nth-child(3) > button',
        track: 'main_outlet_btn',
        method: 'on'
    }
];


/**
 * Loop through tracking map items
 */
for ( var i = 0; i < trackingMap.length; i++ ) {

    /**
     * A single tracking item config
     * @type {Object}
     */
    var trackingItem = trackingMap[ i ];

    /**
     * Check if method property is valid
     */
    if ( typeof jQuery( trackingItem.selector )[ trackingItem.method ] !== 'undefined' ) {

        /**
         * Attach method listener
         */
        jQuery( trackingItem.selector )[ trackingItem.method ]( 'click', function() {
            console.log( trackingItem );

            /**
             * Check that exponea.track exists before calling
             */
            if ( typeof exponea !== 'undefined' && 'track' in exponea ) {
                exponea.track( trackingItem.track, {
                    action: 'click'
                } );
            }

        } );
    }
}