Jquery does not return second image in the list

Asked

Viewed 72 times

1

Apparently, the code is correct, it’s as follows:

{
if( $(".ativo").next().size() ) 
{ 
    $(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo")
}
else 
{ 
    $(".ativo").fadeOut().removeClass("ativo");
    $("#slide img").eq(0).fadeIn().addClass("ativo")
 }

And the current html:

<div id="slide">

            <a href="CURSOS.html"><img id="slideIMG1" src="IMAGENS/mao (370px) - Final.jpg" width="1155" height="370" alt=""/></a>
            <a href="#"><img id="slideIMG2" src="IMAGENS/picjumbo (370px).jpg" width="1155" height="370" alt=""/></a>

         </div>
jquery html css
  • 4

    Where is the .ativo in your html? And the image selector is fixed $("#slide img").eq(0). You’ll always get the first picture.

  • 1

    I don’t understand, where in the code above you are "returning" something? By the way, in your last line you use a eq(0), then this selector is filtered to apply only to the first previously selected result (i.e. if "#slide img" selected two images, the eq(0) will cause only the first to continue as part of the whole).

  • as @Dontvotemedown said, really eq(0) will only activate the first image, but after all what you want to do with a slide and two images ?

  • I don’t understand. Because if there is something after the first one, it is for him to display that something and add the "active" class to that something.

  • 1

    ativo is a class applied to the image itself or link (a)? If you go to img, I think I’ve identified your problem... (no picture there next, they are the only daughters of your a)

  • In case I believe it applies the active class to the same image, according to the selector.

Show 1 more comment

1 answer

3


Your problem is that the image has no siblings, she is only link daughter (a), so that the next will not return anything. To select the next image, it is necessary to go up to the parent, grab the next link and then go down to the image again:

function mudar() { 
            
    if( $(".ativo").parent().next().size() ) 
    { 
        $(".ativo").fadeOut().removeClass("ativo")
            .parent().next().children("img")
            .fadeIn().addClass("ativo")
    }
    else 
    { 
        $(".ativo").fadeOut().removeClass("ativo");
        $("#slide img").eq(0).fadeIn().addClass("ativo")
    }
}
mudar();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="mudar()">Teste</button>
<div id="slide">

    <a href="CURSOS.html"><img id="slideIMG1" src="http://sempreupdate.org/wp-content/uploads/2014/12/google-small.png" alt="A"/></a>
    <a href="#"><img id="slideIMG2" src="https://s1.yimg.com/rz/d/yahoo_en-US_f_p_bestfit_2x.png" alt="B" class="ativo"/></a>

</div>

Alternatively, you can apply the class to a instead of the img, simplifying your code (if it is possible to do this without "breaking" your CSS too much, of course).

  • It worked. That’s right. Thank you very much.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.