CODEWITHSUNDEEP
javascriptjquery
Dr. Waffles
Dr. Waffles

Reputation: 1

jQuery conditional, else statement invalid?

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?

Upvotes: 0

Views: 58

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138267

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");

Upvotes: 1

Related Questions