未正确扫描的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 = [

    // 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'

                } );

            }

        } );

    }

}