Question

我正在使用Bootstrap Carousel并且我已经testing添加了一类.link-txt，具体取决于item是.active。.link-txt。.active是item。但是，我希望在hasClass从特定的$('#home-carousel').on('slid.bs.carousel', function() { if ($('.item').hasClass('active')) { $('.active .link-txt').addClass('testing'); } else { $('.link-txt').removeClass('testing'); } });移除<?php if( have_rows('carousel') ):?> <div id="home-carousel" class="carousel bs-slider fade control-round indicators-line" data-ride="carousel" data-interval="6000"> <div class="carousel-inner" role="listbox"> <?php $i=0; while ( have_rows('carousel') ) : the_row();?> <div class="item <?php if($i === 0) { ?> active <?php } ?>" style="background-image:url(<?php the_sub_field('image'); ?>);"> <div class="carousel-caption"> <div class="col-md-6 "> <h1><a href="<?php the_sub_field('link');?>"><?php the_sub_field('heading');?></a></h1> <a href="<?php the_sub_field('link');?>" class="link-txt">View</a> </div> </div> </div> <?php ++$i; endwhile; ?> </div> </div> <?php endif;?>时删除该类。testing。我似乎无法使用if .active

删除该课程

到目前为止，这是我的jQuery：

.active

HTML：

.link-txt

除了无法删除课程spring.jpa.hibernate.ddl-auto=create spring.datasource.url=jdbc:mysql://localhost:3306/db_example spring.datasource.username=springuser spring.datasource.password=ThePassword之外....我还发现第一张带有<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency>的幻灯片已添加到HTML中，但这似乎并不是用jQuery检测。意味着在第二张幻灯片之前不会添加课程。有没有办法在第一张幻灯片上检测Crypto::seal()并将测试添加到Box::open(anonymousCipherText: Data, recipientPublicKey: PublicKey, recipientSecretKey: SecretKey) -> Data?？

Here is Fiddle显示问题。

Answer 1

function linkClass() {
  $('.item .link-txt').removeClass('testing') //Remove every class no check necessary
  $('.item.active .link-txt').addClass('testing'); //Add the class to the active one
}

//Document ready so it works also on startup
$( document ).ready(function() {
    linkClass();
});

$('#home-carousel').on('slid.bs.carousel', function() {linkClass()});

它已经在第一张幻灯片上运行，你的问题只是它没有在创建上滑动。所以我添加了一个文档就绪函数，因此它也可以在启动时工作。

编辑：此示例我已从https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp复制我添加了我的代码，如果您使用开发人员控制台打开它，您将看到它完全符合您的要求。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Carousel Events - slid.bs.carousel</h2>
  <p>The <strong>slid.bs.modal</strong> event occurs when the carousel has finished sliding from one item to another.</p>
  <div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/350x150" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/360x150" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="http://via.placeholder.com/370x150" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/380x150" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<script>
$(document).ready(function(){
    // Activate Carousel
    $("#myCarousel").carousel();
    
    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });
    $(".item4").click(function(){
        $("#myCarousel").carousel(3);
    });
    
    // Enable Carousel Controls
    $(".left").click(function(){
        $("#myCarousel").carousel("prev");
    });
    $(".right").click(function(){
        $("#myCarousel").carousel("next");
    });

    $("#myCarousel").on('slid.bs.carousel', function () {
        $('.item img').removeClass('testing') //Remove every class no check necessary
        $('.item.active img').addClass('testing');
    });
});
</script>

</body>
</html>

Bootstrap Carousel如果项目有效则将类添加到div然后删除

1 个答案: