jQuery conditional, else statement invalid?

Question

I am working on a small sample gallery for a project which moves images with a right/left button by removing and reassigning classes for identification, then appending images to a display element.

I have tried introducing an if/else conditional statement for one of my variables where the "else" statement is intended to select the image opposite the active image if it is at the end of the array (if say the active image is the last image in the gallery, I want the else statement to select for the first image for the RIGHT button). The else statement of my declaration does not work however and the active class is assigned to whatever element is next in line in the DOM.

HTML:

    <h2>Random Image Gallery</h2>

        <div id="display"></div>

    <div class="active slider" id="slide1">
        <img src="images/482.jpg" alt="random image boats">
        <p>Boats on a River</p>
    </div>

    <div class="slider" id="slide2">
        <img src="images/1109-600x376.jpg" alt="random image">
        <p>Grey Landscape</p> 
    </div>

    <div class="slider" id="slide3">
        <img src="images/1648jpg" alt="random image3">
        <p>River Dock</p>
    </div>

<article>

        <button id="lbutton">Left</button>

        <button id="rbutton">Right</button>

    </article>

javascript (with comments over the conditionals in question):

jQuery("#rbutton").on("click", function() {
    "use strict";

    var active = jQuery("div#gallerybox > div.active");
    //"else" conditional is inert?
    var next = active.next("div.slider") ? active.next("div.slider") : jQuery("div#slide1");

    var nextImage = next.find("img").clone().addClass("dis");

    var display = jQuery("div#display");

    var prevDisImg = display.find("img.dis ~ img.dis") ? display.find("img:first-of-type") : null() ;

    nextImage.appendTo("div#display"); 

    prevDisImg.remove();                

    next.addClass("active");

    active.removeClass("active");


});
         //This button works
jQuery("#lbutton").on("click", function() {
    "use strict";

    var active = jQuery("div#gallerybox > div.active");

    var previous = active.prev("div.slider").length ? active.prev("div.slider") : jQuery("div#gallerybox > div:last");

    var prevImage = previous.find("img").clone().addClass("dis");

    var display = jQuery("div#display");

    var nextDisImg = display.find("img.dis + img.dis") ? display.find("img:last-of-type") : null();

    prevImage.appendTo("div#display");

    nextDisImg.remove();

    previous.addClass("active");

    active.removeClass("active");

});

Where am I going wrong with my "else" declarations? Or am I going about implementing conditionals in the wrong way?

Please provide a fiddle so that people can run your code easily. — user4396006
– user4396006, Commented Jul 30, 2017 at 10:53
@Jonasw I'd like to know what's wrong with using an external web service that's not the stack snippet. — user4396006
– user4396006, Commented Jul 30, 2017 at 11:05
@j.c.rocamonde they may be shut down somewhen, they cannot be copied to the answer directly, they can not be opened on site directly, they... — Jonas Wilms
– Jonas Wilms, Commented Jul 30, 2017 at 11:07

Jonas Wilms · Accepted Answer · 2017-07-30 10:55:17Z

1

jQuery always returns a new jquery Objects, and theyre truthy so youre doing this:

var result = {} ? "truthy":" objects are never falsy";

You may check for the length property of the jquery collection instead:

var previous = active.prev("div.slider").length ? active.prev("div.slider") : jQuery("div#gallerybox > div:last");

answered Jul 30, 2017 at 10:55

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dr. Waffles Over a year ago

Thank you this did work for my left-button function. Looking into using similar principal for the right.

Dr. Waffles Over a year ago

Thank you I found very shorly that .length can be applied to both selectors and apply the desired result. Do you believe the 'null' else statement is necessary here?

Jonas Wilms Over a year ago

@mister sir no, i dont think so.

Collectives™ on Stack Overflow

jQuery conditional, else statement invalid?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related