我尝试为左和右添加背景颜色当幻灯片位于中间时，我的引导旋转木马中的右图标。当左侧没有幻灯片时，背景正在完美地添加。反之亦然。但是，当我们处于中间幻灯片时，不要同时添加两个图标。作为我对此的新手，它正在挣扎。我怎么能摆脱它呢？请解释。
SELECT t1.zone_id,
t1.name,
t2.code,
t1.timestamp_create
FROM table1 as t1
LEFT JOIN
table2 as t2
ON t1.zone_id = t2.zone_id AND
t1.timestamp_create BETWEEN t2.timestamp_start AND t2.timestamp_end
if (window.matchMedia('(max-width: 800px)').matches) {
$('.pi-carousel').css({
'width': '100%'
});
$('.company-img').hide();
$('.comny-desc').css({
'margin-top': '20px'
});
$('.bdr-top-btm>p').css({
'padding-top': '10px',
'padding-bottom': '10px'
});
$('.company-btn').parent().addClass('text-center').removeClass('text-right');
$('.company-btn>button').addClass('btn-md').removeClass('btn-lg').css({
'margin-bottom': '15px'
});
$('.company-btn>button:first-child').removeClass('mrgn-right-15');
}
/*Changing the carousel's left & right icon's background*/
var checkitem = function() {
var $this;
$this = $("#myCarousel");
if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
$this.children(".right").css({
'background': '#1E6C97'
});
$this.children(".left").css({
'background': '#B8C0C5'
});
} else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) {
$this.children(".left").css({
'background': '#1E6C97'
});
$this.children(".right").css({
'background': '#B8C0C5'
});
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#myCarousel").on("slid.bs.carousel", "", checkitem);
/*Changing the carousel's left & right icon's background-ends*/.success-quotations>h4 {
font-size: 1.28em;
margin: 0px;
font-family: "Montserrat";
color: #505253;
line-height: 1.556;
text-align: center;
border-bottom: 1px solid #D5DBDE;
padding: 30px 0px;
}
.crousel-title>h3 {
font-size: 2.42em;
margin: 0px;
font-family: "Montserrat";
color: #383F42;
line-height: 0.824;
text-align: center;
padding: 32px 0px;
}
.pi-carousel {
background-color: #fff;
border: 1px solid #D5DBDE;
position: relative;
width: 87.76%;
margin-left: auto;
margin-right: auto;
font-family: 'montserrat';
}
.pi-carousel .carousel-inner>.item>.row
/*, .pi-carousel .carousel-inner > .item > a > img*/
{
width: 90%;
margin: auto;
}
.pi-carousel .carousel-inner {
min-height: 305px;
}
.invite-crousel {
min-height: 250px;
}
.invite-suppliers-cmpny {
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
-o-box-shadow: 0 0 4px #ccc;
box-shadow: 0 0 4px #ccc;
border: 1px solid #ccc;
margin-top: 24px;
min-height: 200px;
padding-left: 0px;
padding-right: 0px;
display: flex;
align-items: center;
justify-content: center
}
.invite-suppliers-btn {
margin-top: 10px;
margin-bottom: 20px;
}
.invite-suppliers-btn>button {
padding-right: 25px;
padding-left: 25px;
}
.right.carousel-control.right-carousel-control {
background: #1E6C97;
color: #fff;
opacity: 1;
width: 5%;
}
.verification {
padding: 10px 0px;
}
.verification>p img {
vertical-align: top;
}
.verification>p {
display: inline-block;
padding-right: 80px;
margin-bottom: 0px;
}
.company-img {
position: relative;
min-height: 305px;
width: 206px;
border-right: 2px solid #B8C0C5;
}
.company-img>img {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lft-carousel-control,
.lft-carousel-control:hover {
opacity: 1;
}
.right-carousel-control>i,
.lft-carousel-control>i {
font-size: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.carousel-control.lft-carousel-control {
color: #fff;
opacity: 1;
width: 5%;
}
.company-content>h3 {
font-family: "Montserrat";
color: #1E6C97;
font-size: 1.30em;
margin-top: 15px;
}
.company-content>h3>a:hover {
font-weight: 600;
}
.company-content>p {
font-size: 0.85em;
}
.compny-desc {
border-top: 5px solid #D7DDE0;
border-bottom: 5px solid #D7DDE0;
border-radius: 5px;
font-size: 1.07em;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
max-height: 94px;
overflow-y: auto;
}
答案 0 :(得分：1)
你的逻辑错误。您有条件，如果它是第一次滑动，禁用（视觉上）前一个箭头并启用下一个箭头。如果是最后一张幻灯片，请禁用下一个箭头并启用上一个箭头。但是对于所有其他情况（代码中的else块），您没有启用/禁用箭头。这些剩余条件是您希望启用两个箭头的条件。
因此，您应该在else区块中启用下一个和上一个箭头。
if (window.matchMedia('(max-width: 800px)').matches) {
$('.pi-carousel').css({
'width': '100%'
});
$('.company-img').hide();
$('.comny-desc').css({
'margin-top': '20px'
});
$('.bdr-top-btm>p').css({
'padding-top': '10px',
'padding-bottom': '10px'
});
$('.company-btn').parent().addClass('text-center').removeClass('text-right');
$('.company-btn>button').addClass('btn-md').removeClass('btn-lg').css({
'margin-bottom': '15px'
});
$('.company-btn>button:first-child').removeClass('mrgn-right-15');
}
/*Changing the carousel's left & right icon's background*/
var checkitem = function() {
var $this;
$this = $("#myCarousel");
if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
$this.children(".right").css({
'background': '#1E6C97'
});
$this.children(".left").css({
'background': '#B8C0C5'
});
} else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) {
$this.children(".left").css({
'background': '#1E6C97'
});
$this.children(".right").css({
'background': '#B8C0C5'
});
} else {
$this.children(".carousel-control").show();
$this.children(".left").css({
'background': '#1E6C97'
});
$this.children(".right").css({
'background': '#1E6C97'
});
}
};
checkitem();
$("#myCarousel").on("slid.bs.carousel", "", checkitem);
/*Changing the carousel's left & right icon's background-ends*/.success-quotations>h4 {
font-size: 1.28em;
margin: 0px;
font-family: "Montserrat";
color: #505253;
line-height: 1.556;
text-align: center;
border-bottom: 1px solid #D5DBDE;
padding: 30px 0px;
}
.crousel-title>h3 {
font-size: 2.42em;
margin: 0px;
font-family: "Montserrat";
color: #383F42;
line-height: 0.824;
text-align: center;
padding: 32px 0px;
}
.pi-carousel {
background-color: #fff;
border: 1px solid #D5DBDE;
position: relative;
width: 87.76%;
margin-left: auto;
margin-right: auto;
font-family: 'montserrat';
}
.pi-carousel .carousel-inner>.item>.row
/*, .pi-carousel .carousel-inner > .item > a > img*/
{
width: 90%;
margin: auto;
}
.pi-carousel .carousel-inner {
min-height: 305px;
}
.invite-crousel {
min-height: 250px;
}
.invite-suppliers-cmpny {
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
-o-box-shadow: 0 0 4px #ccc;
box-shadow: 0 0 4px #ccc;
border: 1px solid #ccc;
margin-top: 24px;
min-height: 200px;
padding-left: 0px;
padding-right: 0px;
display: flex;
align-items: center;
justify-content: center
}
.invite-suppliers-btn {
margin-top: 10px;
margin-bottom: 20px;
}
.invite-suppliers-btn>button {
padding-right: 25px;
padding-left: 25px;
}
.right.carousel-control.right-carousel-control {
background: #1E6C97;
color: #fff;
opacity: 1;
width: 5%;
}
.verification {
padding: 10px 0px;
}
.verification>p img {
vertical-align: top;
}
.verification>p {
display: inline-block;
padding-right: 80px;
margin-bottom: 0px;
}
.company-img {
position: relative;
min-height: 305px;
width: 206px;
border-right: 2px solid #B8C0C5;
}
.company-img>img {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lft-carousel-control,
.lft-carousel-control:hover {
opacity: 1;
}
.right-carousel-control>i,
.lft-carousel-control>i {
font-size: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.carousel-control.lft-carousel-control {
color: #fff;
opacity: 1;
width: 5%;
}
.company-content>h3 {
font-family: "Montserrat";
color: #1E6C97;
font-size: 1.30em;
margin-top: 15px;
}
.company-content>h3>a:hover {
font-weight: 600;
}
.company-content>p {
font-size: 0.85em;
}
.compny-desc {
border-top: 5px solid #D7DDE0;
border-bottom: 5px solid #D7DDE0;
border-radius: 5px;
font-size: 1.07em;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
max-height: 94px;
overflow-y: auto;
}<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="pi-carousel">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-wrap="false" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active invite-crousel">
<div class="row">
<div class="col-sm-3 pad-lft-0">
<div class="company-img">
<img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180">
</div>
</div>
<div class="col-sm-9 pad-lft-0">
<div class="company-content">
<h3>XYZ Ltd.</h3>
<p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p>
<p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p>
</div>
<div class="compny-desc bdr-top-btm scroll-bar">
<p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p>
</div>
<div class="verification">
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p>
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p>
</div>
<div class="text-right">
<div class="company-btn">
<button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> -->
</div>
</div>
</div>
</div>
</div>
<div class="item invite-crousel">
<div class="row">
<div class="col-sm-3 pad-lft-0">
<div class="company-img">
<img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180">
</div>
</div>
<div class="col-sm-9 pad-lft-0">
<div class="company-content">
<h3>XYZ Ltd.</h3>
<p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p>
<p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p>
</div>
<div class="compny-desc bdr-top-btm scroll-bar">
<p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p>
</div>
<div class="verification">
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p>
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p>
</div>
<div class="text-right">
<div class="company-btn">
<button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> -->
</div>
</div>
</div>
</div>
</div>
<div class="item invite-crousel">
<div class="row">
<div class="col-sm-3 pad-lft-0">
<div class="company-img">
<img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180">
</div>
</div>
<div class="col-sm-9 pad-lft-0">
<div class="company-content">
<h3>XYZ Ltd.</h3>
<p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p>
<p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p>
</div>
<div class="compny-desc bdr-top-btm scroll-bar">
<p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p>
</div>
<div class="verification">
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p>
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p>
</div>
<div class="text-right">
<div class="company-btn">
<button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> -->
</div>
</div>
</div>
</div>
</div>
<div class="item invite-crousel">
<div class="row">
<div class="col-sm-3 pad-lft-0">
<div class="company-img">
<img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180">
</div>
</div>
<div class="col-sm-9 pad-lft-0">
<div class="company-content">
<h3>XYZ Ltd.</h3>
<p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p>
<p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p>
</div>
<div class="compny-desc bdr-top-btm scroll-bar">
<p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p>
</div>
<div class="verification">
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p>
<p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p>
</div>
<div class="text-right">
<div class="company-btn">
<button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control lft-carousel-control" href="#myCarousel" role="button" data-slide="prev">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control right-carousel-control" href="#myCarousel" role="button" data-slide="next">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>