Show and hide caption with jquery

Asked

Viewed 201 times

0

I’m trying to show and hide a div if the slide div has the active class. The problem is that the div always keeps being displayed, even when the bootstrap slide changes and the active class is removed.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div id="slide1" class="item active"></div>
        <div id="slide2" class="item"></div>

        <div id="caption1" class="carousel-caption">
            <div class="container-caption">
                <h1>Crossfit 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius efficitur porta. Aliquam sit amet aliquet neque. Vivamus tempus tristique magna eget rutrum.</p>
                <button class="btn btn-primary">Saiba mais</button>
            </div>
        </div>

        <div id="caption2" class="carousel-caption">
            <div class="container-caption">
                <h1>Crossfit 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius efficitur porta. Aliquam sit amet aliquet neque. Vivamus tempus tristique magna eget rutrum.</p>
                <button class="btn btn-primary">Saiba mais</button>
            </div>
        </div>

    </div>
</div>

<script>
    $(document).ready(function(){
        if($("#slide1").hasClass("active")) {
            $(".carousel-caption").show();
        } else {
            $(".carousel-caption").hide();
        }
    });
</script>
javascript jquery twitter-bootstrap

  • For me it worked, I removed the class "active" and was hidden to div.

  • It’s not working for me. Slide changes to slide2, active class is removed from slide1 and div with the Carousel-caption class is still shown

2 answers

1

1) It may seem obvious, but you are carrying a jquery lib along on this page, right?

2) that $(Document). ready() only runs once, when the page is loaded, if you want something monitoring the class of slide1 you can put a setInterval with a loop of seconds, or make one . bind . change . on de jquery

  • I used . change but it didn’t work;

  • $("#slide1"). change(Function() { if($(this).hasClass("active")) { $(".Carousel-caption"). show(); } Else { $(".Carousel-caption"). Hide(); } });

  • puts the bind on the/link button that makes this class modification.I don’t know if you can monitor an item that is not a form element (input, select)

  • No button, slide passes automatically.

  • searches where does this "automatic" there, and puts the call of its function inside it, must be a setInterval or setTimeout of that carousel lib

0

puts caption inside the item.

is HTML error.

<div id="slide1" class="item active">
  <div id="caption1" class="carousel-caption">
    <div class="container-caption">
      <h1>Crossfit 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius efficitur porta. Aliquam sit amet aliquet neque. Vivamus tempus tristique magna eget rutrum.</p>
       <button class="btn btn-primary">Saiba mais</button>
     </div>
   </div>
</div>

Browser other questions tagged javascript jquery twitter-bootstrap

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