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.

the code you added won't parse... it's invalid syntax. that `:` should be an `=` or something. i'm not sure what the goal is here. — gloomy.penguin, Oct 22 '14 at 03:47
Did you mean `slideshowGroup = this.parentNode.parentNode.parentNode.id` — 000, Oct 22 '14 at 03:48
What is slideshowGroup? You cannot assign a variable with a ':' this type of assignment is used inside object literal e.g., {key: valye} — Abhishek Prakash, Oct 22 '14 at 03:49
ohh.... so based on the other code... you didn't copy your `{ brackets }` or the function it's passed to... or return statement. — gloomy.penguin, Oct 22 '14 at 03:49

score 2 · Accepted Answer · answered Oct 22 '14 at 03:51

2

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
        } : {});
    };
});

answered Oct 22 '14 at 03:51

Arun P Johny

384,651
66
527
531

Well, both of those work. Thank you! I'm not entirely sure of how the first one is working though. By declaring the var obj = {}; it appears that you are creating an object, then later in the if statement you seem to be adding an attribute (slideshowGroup) along with a value for it. Assuming that that's right, the part that has me confused is that you then pass the entire object as a parameter of the hs.expand, when I think what it's looking for is simply the value of obj.slideshow. How is the correct data getting extracted from the obj object? – fbb Oct 22 '14 at 06:54
Also (since we're restricted on characters here): Your second option is the shorthand if statement, right? I would have thought that that would be subject to the same problem as a standard if statement. Can you explain why this works while a regular if statement does not? – fbb Oct 22 '14 at 06:55

score 0 · Answer 2 · answered Oct 22 '14 at 03:52

I think you might want this, based on the other code:

   jQuery('.gallery-item a').addClass('highslide').each(function() {
      this.onclick = function() {

         if(hsGroupByWpGallery){
            return hs.expand(this, {
               slideshowGroup: this.parentNode.parentNode.parentNode.id
            });
          }
       };
   });

if statement within function breaks javascript

2 Answers2