Проблема такова что ничего не работает и непонятно почему. Не читает параметр length. Я посмотрел все другие вопросы по этой теме, но ничего не сработало в мое случае.
Строка кода которая не работает
reqItem = existedItem.length ? existedItem.index() : edgeItem.index();
Пробовал решить такими способами:
reqItem = existedItem && existedItem.length ? existedItem && existedItem.index() : edgeItem.index();
reqItem = undefined !== existedItem && existedItem.length ? undefined !== existedItem && existedItem.index() : edgeItem.index();
Как я понял суть проблемы, что блоки if
просто не выполняются или перезапись значения в переменной не идет.
Полный код выкладываю тут (иначе каша)
https://jsfiddle.net/Maximus00000/9yfc26kb/21/
//slider
//click ruls btn
$(".reviews__controls").on('click', function(event) {
event.preventDefault();
var $this = $(event.target),
cont = $this.closest(".reviews__slider"),
items = $(".reviews__item", cont),
activeItem = items.filter('.active__slide');
var existedItem,
edgeItem,
reqItem;
console.log($this)
console.log(cont)
console.log(items)
console.log(activeItem)
console.log(existedItem)
console.log(edgeItem)
console.log(reqItem)
if ($this.hasClass('reviews__btn_next')) {
existedItem = activeItem.next();
edgeItem = items.first();
console.log(existedItem)
console.log(edgeItem)
console.log($this)
}
if ($this.hasClass('reviews__btn_prev')) {
existedItem = activeItem.prev();
edgeItem = items.last();
console.log(existedItem)
console.log(edgeItem)
console.log($this)
}
reqItem = existedItem.length ? existedItem.index() : edgeItem.index();
moveSlide(cont, reqItem);
});
//searh number slid and activ slide
var moveSlide = function(cont, slideNum) {
var items = cont.find(".reviews__item"),
activeSlide = items.filter('.active__slide'),
reqItem = items.eq(slideNum),
reqIndex = reqItem.index(),
list = cont.find(".slider__list"),
dur = 500;
if (reqItem.length) {
list.animate({
'left': -reqIndex * 100 + '%'
}, dur, function() {
activeSlide.removeClass('active__slide');
reqItem.addClass('active__slide');
});
}
};
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
p {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
footer {
position: relative;
width: 100%;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
margin: 0;
padding: 0;
color: #000;
font-size: 16px;
line-height: 1.42;
}
section {
position: static;
display: block;
width: 100%;
height: 100%;
background: #000;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.maincontent {
width: 100%;
height: 100%;
min-height: 650px;
}
.reviews {
position: relative;
color: #fff;
display: flex;
height: 90%;
}
.reviews__slider {
position: relative;
width: 100%;
}
.reviews__list {
position: relative;
white-space: nowrap;
top: 30%;
left: 0;
}
.reviews__item {
display: inline-block;
text-align: center;
width: 100%;
}
.reviews__controls,
.reviews__btn_next,
.reviews__btn_prev {
position: absolute;
}
.reviews__controls {
width: 85%;
top: 45%;
}
.reviews__btn_next {
right: 0;
}
.reviews__btn_prev {
right: 80%;
}
.reviews__arrow_right,
.reviews__arrow_left {
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 0.625rem;
}
.reviews__arrow_left {
position: relative;
transform: rotate(135deg);
top: 15px;
left: 20px;
}
.reviews__arrow_right {
position: relative;
transform: rotate(-45deg);
top: 15px;
left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="maincontent">
<section class="reviews">
<div class="reviews__slider">
<ul class="reviews__list">
<li class="reviews__item active__slide">
<p class="paragraph__quote">These guys do amazing work here. They made my car awesome.</p>
<div class="user__info"><span class="user__name">John Brown</span><span class="user__car">Chevrolet Camaro</span></div>
</li>
<li class="reviews__item">
<p class="paragraph__quote">Lorem ipsum dolor sit amet</p>
<div class="user__info"><span class="user__name">Brown John</span><span class="user__car">Chevrolet</span></div>
</li>
<li class="reviews__item">
<p class="paragraph__quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, explicabo.</p>
<div class="user__info"><span class="user__name">John</span><span class="user__car">Camaro</span></div>
</li>
</ul>
<div class="reviews__controls"><a href="#" class="review__btn btn__prev reviews__btn_prev"><i class="reviews__arrow_left"></i></a><a href="#" class="review__btn btn__next reviews__btn_next"><i class="reviews__arrow_right"></i></a></div>
</div>
</section>
</div>
</div>
p.s. Забыл написать. Этот код отлично работает у меня в других проектах. И вчера вечером он самопроизвольно заработал, но потом снова отрубился.
Uncaught SyntaxError: Unexpected token )
existedItem
иedgeItem
получают значения в одних и тех жеif
. Поэтому еслиexistedItem
-undefined
, то иedgeItem
тожеundefined