未正确扫描的jQuery代码需要简化它

Question

我正在尝试为主导航中的每个元素设置跟踪。一切正常，但在某些时候我开始收到无法读取代码的错误。

我知道错误正在出现，因为对于每个元素，我都使用“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'调用新元素？

谢谢你。

这是错误代码，它出现在我越过某些代码行之后整个代码停止工作

Answer 1

好的，这是我在黑暗中的刺...不太了解您的情况，我提出了以下代码。我基本上将每个跟踪事件的配置放入一个数组中，以便每次循环调用同一段代码。这可能有点矫枉过正，并且会因未来的变化而变得混乱，但这是¯\_(ツ)_/¯method配置对象中的属性与您为每个项目调用的函数有关，例如jQuery('#heading-163').one(...)vsjQuery('#heading-114 > div > div > div > a.outlet_text > img').on(...)var trackingMap = [&nbsp; &nbsp; // COLLECTION MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-163',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_collection',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // SLNECNE OKULIARE MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-3',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_sunglasses',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // DIOPTRICKE OKULIARE MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-9',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_glasses',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // LYZIARSKE MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-14',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_snow_goggles',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // SPORTOVE MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-38',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_sportove',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // ZNACKY MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-48',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_brands',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; // OUTLET MAIN&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-114',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_outlet',&nbsp; &nbsp; &nbsp; &nbsp; method: 'one'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-114 > div > div > div > a.outlet_text > img',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_outlet_left_img',&nbsp; &nbsp; &nbsp; &nbsp; method: 'on'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-114 > div > div > div > a:nth-child(3) > img',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_outlet_right_img',&nbsp; &nbsp; &nbsp; &nbsp; method: 'on'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: '#heading-114 > div > div > div > a:nth-child(3) > button',&nbsp; &nbsp; &nbsp; &nbsp; track: 'main_outlet_btn',&nbsp; &nbsp; &nbsp; &nbsp; method: 'on'&nbsp; &nbsp; }];/**&nbsp;* Loop through tracking map items&nbsp;*/for ( var i = 0; i < trackingMap.length; i++ ) {&nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp;* A single tracking item config&nbsp; &nbsp; &nbsp;* @type {Object}&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; var trackingItem = trackingMap[ i ];&nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp;* Check if method property is valid&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; if ( typeof jQuery( trackingItem.selector )[ trackingItem.method ] !== 'undefined' ) {&nbsp; &nbsp; &nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* Attach method listener&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; &nbsp; &nbsp; jQuery( trackingItem.selector )[ trackingItem.method ]( 'click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log( trackingItem );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* Check that exponea.track exists before calling&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( typeof exponea !== 'undefined' && 'track' in exponea ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exponea.track( trackingItem.track, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; action: 'click'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; }}