Question

我想在每次滑块滑动时更改容器的背景。我想我需要检查项目的类是否/何时因为活动。我也想知道是否有一个我应该听的事件。以下是我正在研究的问题：

https://jsfiddle.net/podbarron/nj04xms5/

$(function(){
$('#carousel-indicators').on('click', 'li', function(){

});
});

谢谢！

Answer 1

Bootstrap Carousel有一个在每次幻灯片转换时/之后触发的事件。你应该可以使用它。

示例：https://jsfiddle.net/nj04xms5/7/

活动中的js非常基本但只是为了给你一个想法。

e.relatedTarget会为您提供当前幻灯片，如果您想从中获取信息（即ID）

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
      if(e.relatedTarget.id == 'firstSlide'){
          $("#landingContainer").css('background-color', 'orange');
      } else if(e.relatedTarget.id == 'secondSlide'){
          $("#landingContainer").css('background-color', 'green');
      }
})

Answer 2

<td><strong>Date Aministered:</strong><input type="date" id="date-of-screening" name="DateAdministered" value="@(DateAdministered !=null ? DateAministered.ToString("MM/dd/yyyy") : "01/01/2000")"></td>

您可以使用数组来定义颜色，并按顺序应用它们。

Answer 3

Bootstrap触发events on carousel transitions，这是你可以改进它的第一种方式。恕我直言，第二个重大改进是避免使用详细的if / else语句并在每张幻灯片上定义目标颜色，就像我在this fiddle

中所做的那样

<强> JS

$(function(){
    $('.carousel').on('slide.bs.carousel', function(event) {
        color = $(event.relatedTarget).attr('data-new-color');
        if (color) {
            $('#landingContainer').css('background-color', color)
        }
    })
});

样本轮播元素

<div id="secondSlide" class="item" data-new-color="blue">
  <img src="http://dummyimage.com/1080x400/0011ff/000" alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

Answer 4

html = '''
        <td valign="top" >
        <span class="recordAttribute" >Taxonomy</span>: Mollusca, Gastropoda, Littorinimorpha, Hydrobiidae, Hydrobia<br>
        <span class="recordAttribute" >Identifiers:</span> AF118324[sampleid]               <br>
        <span class="recordAttribute" >Depository</span>: Mined from GenBank, NCBI                    &nbsp;
        </td>
       '''
soup = BeautifulSoup(html, 'html.parser')
obj = soup.find('span', text='Identifiers:').nextSibling
print(obj)

在Bootstrap Carousel上更改活动类时更改背景

4 个答案: