使用稍微修改过的bootstrap轮播,我需要能够检测到祖父母div(在本例中为.row
类),这可能与默认的.row-default
(有一个.row-light
不同透明背景),.row-dark
和#fff
。我可以从相应的类中获取浅色和深色,但我需要能够检测背景颜色是否设置为透明,并将控件类设置为白色或<div class="row row-dark">
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="quote-carousel">
<div class="carousel-inner">
<h6>What customers say about us</h6>
<div class="item active">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<i class="material-icons"></i>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</div>
,如果祖父母设置为透明。这将允许控件位于转盘滑动边缘上。
HTML
.row-dark{
background-color: #ddd;
}
.quote-carousel{
h6{
color: $purple;
font-weight: bold;
text-align: center;
}
h3{
color: $dark-navy-blue;
font-weight: 100;
padding: 30px 0px 30px 0px;
margin: 0% 12% -1% 12%;
}
.carousel{
position: relative;
width: 60%;
margin: 0 auto;
min-height: 170px;
padding-left: 5%;
padding-right: 5%;
}
.carousel-control{
padding-top: 4%;
padding-bottom: 7%;
width:7%;
}
.material-icons{
color: $black;
padding: 0px;
border: 1px solid $darkest-grey;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.active{
margin-top: -13px;
}
.thumbnails{
padding: 0px 40px;
li{
margin-bottom: 5%;
}
}
.slide-content{
text-align: center;
}
}
/***************** TABLET **************/
@media (min-device-width: $screen-sm-min) and (max-device-width: $screen-lg-min) {
.quote-carousel h3{
margin: 0 auto;
padding: 30px 0px 15px;
}
.carousel-control{
background-color: #ebebeb;
padding-top: 4%;
padding-bottom: 7%;
width: 7%;
}
}
/****************** MOBILE ***************/
@media (max-device-width: $screen-xs-max) {
.quote-carousel h3{
margin: 0 auto;
font-size: 12px;
padding: 30px 0px 15px;
}
.carousel-control{
background-color: #ebebeb;
padding-top: 4%;
padding-bottom: 7%;
width: 7%
}
}
CSS
$('.left').hide();
$('.carousel').carousel({
wrap: false
}).on('slid.bs.carousel', function () {
curSlide = $('.active');
if(curSlide.is( ':nth-child(2)' )) {
$('.left').hide();
return;
} else {
$('.left').show();
}
if (curSlide.is( ':last-child' )) {
$('.right').hide();
return;
} else {
$('.right').show();
}
});
的jQuery
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().parent().parent().css(property);
if(property && value) $this.css(property, value);
};
$('.carousel-control').inheritGrandparent('background');
这是抓住祖父母班级并从那里申请该属性,但如果行背景透明,我不知道如何将控件背景设置为白色。
<cfhttp url="https://api.sendgrid.com/v3/asm/suppressions/global/emailAddress@unsub.com" method="delete" result="returnStruct3">
<cfhttpparam name="Authorization" value="Basic #ToBase64('accountUserName:AccountPassword')#" type="header">
</cfhttp>
答案 0 :(得分:0)
我认为最简单的方法是将您的函数转换为条件,看看祖父母是否有.row-default
类,并相应地应用。
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
grandparent = $this.closest('.row'),
value = grandparent.css(property);
if (property && value) {
if (grandparent.hasClass('row-default')) {
$this.css(property, 'white');
} else {
$this.css(property, value);
}
}
};
$('.carousel-control').inheritGrandparent('background');
但您也可以检查祖父母类的值并使用条件。它返回的值可能不一致,因浏览器而异。
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.closest('.row').css(property);
if (property && value) {
if (value.indexOf('transparent') !== -1 || value.indexOf('rgba(0, 0, 0, 0)') !== -1 ) {
$this.css(property, 'white');
} else {
$this.css(property, value);
}
}
};
$('.carousel-control').inheritGrandparent('background');