Problems with IF loop

Question

I’m having trouble creating a bond if in the jquery so that when the carousel runs the function carousel() he makes a noose if, the problem is, it only runs once the if, and then stops performing the loop.

In this case, I was using $('#first-item-carousel.active'),$('#second-item-carousel.active'),$('#third-item-carousel.active') for the ties.

Jquery

$('#items-principais-loja').carousel({
    interval:4000
});
$('#items-principais-loja').on('slide.bs.carousel', function () {
    if() {
        $('#first-item-related').css({'opacity':1});
        $('#second-item-related').css({'opacity':0});
        $('#third-item-related').css({'opacity':0});
        setTimeout(function(){
            $('#first-item-related').css({'display':'inline-block'});
            $('#second-item-related').css({'display':'none'});
            $('#third-item-related').css({'display':'none'});
        },100);
    }else if(){
        $('#first-item-related').css({'display':'none'});
        $('#second-item-related').css({'display':'inline-block'});
        $('#third-item-related').css({'display':'none'});
        setTimeout(function(){
            $('#first-item-related').css({'opacity':0});
            $('#second-item-related').css({'opacity':1});
            $('#third-item-related').css({'opacity':0});
        },100);
    }else if(){
        $('#first-item-related').css({'displauy':'none'});
        $('#second-item-related').css({'displauy':'none'});
        $('#third-item-related').css({'display':'inline-block'});
        setTimeout(function(){
            $('#first-item-related').css({'opacity':0});
            $('#second-item-related').css({'opacity':0});
            $('#third-item-related').css({'opacity':1});
        },100);
    }
});

HTML

<div class="carousel-e-relacionado">
    <div id="items-principais-loja" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#items-principais-loja" data-slide-to="0" class="active"></li>
            <li data-target="#items-principais-loja" data-slide-to="1"></li>
            <li data-target="#items-principais-loja" data-slide-to="2"></li>
        </ol>

    <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" id="first-item-carousel">
                <div class="img-holder">

                    <img src="img/loja-img1.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>
            <div class="item" id="second-item-carousel">
                <div class="img-holder">

                    <img src="img/loja-img2.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>
            <div class="item" id="third-item-carousel">
                <div class="img-holder">

                    <img src="img/loja-img2.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div href="" id="relacionado">
        <a href="" id="first-item-related"></a>
        <a href="" id="second-item-related"></a>
        <a href="" id="third-item-related"></a>
    </div>
</div>

How can I solve the problem ?

Answer 1

If is not a loop, but rather a conditional. Each condition must return a true or false (true / false to be more exact).

See a simple example:

var nome = window.prompt("digite seu nome");
if(nome != null && nome != "")
{
   alert(nome);
}
else{
    alert("Voce nao informou seu nome");
}

that is, within () your code, you must use expressions that return true or false.

See this example I created, where I test whether an element is visible or not:

$(function(){
   var first = $(".first").is(":visible");
   var second = $(".second").is(":visible");


   $(".result").append("<p>" + first + "</p>");
   $(".result").append("<p>" + second + "</p>");
})

https://jsfiddle.net/vm4xu6er/