if statement within function breaks javascript

Question

I'm stumped with this one and would really appreciate someone's help.

I'm customizing highslide for integration with wordpress. Via the following code within the highslide.config.js file I'm adding a class name to certain elements and passing different attributes through an onClick call depending on certain conditions.

Everything works until I add the following code:

if(hsGroupByWpGallery){
    slideshowGroup: this.parentNode.parentNode.parentNode.id
};

When the above code is present, not only does that one statement not execute, but the whole thing stops working. Even if the if statement is something like if(1=1){}; it still breaks.

If I have instead simply slideshowGroup: this.parentNode.parentNode.parentNode.id or nothing (the two options I'm looking for), both do what I would expect. I just need an if statement to switch between them.

Here's the relevant code:

jQuery(document).ready(function() {
  
  var hsCustomGalleryGroupClass = 'fbbHighslide_GalleryGroup';
  var hsCustomGalleryGroupChecker = 0;
  var hsGroupByWpGallery = true;


    jQuery('.' + hsCustomGalleryGroupClass).each(function(){
        hsCustomGalleryGroupChecker++;
        return false;
    });
    if (hsCustomGalleryGroupChecker > 0){
        jQuery('.' + hsCustomGalleryGroupClass).each(function(i, $item) {
            var grpID = $item.id;
            jQuery('#' + grpID + ' .gallery-item a').addClass('highslide').each(function() {
                this.onclick = function() {
                    return hs.expand(this, {
                        slideshowGroup: grpID
                    });
                };
            });
        });
    } else {
        jQuery('.gallery-item a').addClass('highslide').each(function() {
            this.onclick = function() {
                return hs.expand(this, {
                    // This is the problem if statement
                    if(hsGroupByWpGallery){
                      slideshowGroup: this.parentNode.parentNode.parentNode.id
                    };
                });
            };
        });
    };
  
});

Thanks in advance.

Answer 1

The problem is you are trying to assign a conditional property.. you can't have a if condition inside a object definition like that

jQuery('.gallery-item a').addClass('highslide').each(function () {
    this.onclick = function () {
        var obj = {};
        //assign the property only if the condition is tru
        if (hsGroupByWpGallery) {
            obj.slideshowGroup = this.parentNode.parentNode.parentNode.id;
        }
        return hs.expand(this, obj);
    };
});

---

Another way to do the same is

jQuery('.gallery-item a').addClass('highslide').each(function () {
    this.onclick = function () {
        //if the flag is true sent an object with the property else an empty object
        return hs.expand(this, hsGroupByWpGallery ? {
            slideshowGroup: this.parentNode.parentNode.parentNode.id
        } : {});
    };
});