Problems with IF loop

Question

Problems with IF loop

Navigation

#1 by (3 votes)

1

I'm having problems creating a if loop in jquery so that when the carousel runs the carousel() function it loop if , the problem is that it only runs if %, and then stop the loop.

In this case, you were using $('#first-item-carousel.active') , $('#second-item-carousel.active') , $('#third-item-carousel.active') for loops.

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?

jquery css slider bootstrap

asked by anonymous 15.02.2017 / 13:01

1 answer

How to import external Jquery? Select case in two tables

score 3 · Accepted Answer

If it is not a loop, but 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");
}

ie within your code (), you should 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>");
})

link