圣诞树动画

Question

Студеникин Максим

Asked:2020-04-11 17:55:21 +0000 UTC2020-04-11 17:55:21 +0000 UTC 2020-04-11 17:55:21 +0000 UTC

无法读取未定义的属性“长度”（jQuery）

772

问题是没有任何效果，目前尚不清楚原因。不读取长度参数。我已经查看了有关此主题的所有其他问题，但在我的情况下没有任何效果。

行不通的代码行

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>

ps 我忘记写了。这段代码在其他项目中对我来说很好。昨晚他自发地赚了，然后又昏倒了。

3 个回答

Voted

Grundy · Answer 1 · 2020-04-11T18:09:24Z

错误在于并非在所有情况下都为该变量赋值。

如果以下条件都为 false: if ($this.hasClass('reviews__btn_next')) {，if ($this.hasClass('reviews__btn_prev')) {则变量保持未初始化状态并发生所描述的错误。

为什么条件可以是假的？由于以下原因：

var $this = $(event.target)

但是，在这一行$this中，target单击时，目标元素也可以是一个图标，例如<i class="reviews__arrow_left"></i>，它没有所需的类。

可以用方法解决.closest()

//slider

//click ruls btn

$(".reviews__controls").on('click', function(event) {
  event.preventDefault();

  var $this = $(event.target).closest('.review__btn'),
    cont = $this.closest(".reviews__slider"),
    items = $(".reviews__item", cont),
    activeItem = items.filter('.active__slide');
  var existedItem,
    edgeItem,
    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>

Алексей Щепкин · Answer 2 · 2020-04-11T18:13:00Z

Алексей Щепкин

2020-04-11T18:13:00Z2020-04-11T18:13:00Z

变量未初始化，添加检查var len = 0; if (typeof existedItem !== 'undefined') len = existedItem.length;

1

Студеникин Максим · Answer 3 · 2020-04-12T18:20:29Z

简而言之，我是个白痴

整个问题在于缺乏布局。有必要通过以下方式制作控制元素的图标：after or another。然后一切正常并且正常工作。

//slider

    //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('.reviews__list'),
            dur = 500;

        if (reqItem.length) {
            list.animate({
                'left': -reqIndex * 100 + '%'
            }, dur, function () {
                activeSlide.removeClass('active__slide');
                reqItem.addClass('active__slide');
            });
        }

    };

    //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;

        if ($this.hasClass('reviews__btn_next')) {
           existedItem = activeItem.next();
           edgeItem = items.first();  
        }

        if ($this.hasClass('reviews__btn_prev')) {
           existedItem = activeItem.prev();
           edgeItem = items.last();
        }

        reqItem = existedItem.length ? existedItem.index() : edgeItem.index();

        moveSlide(cont, reqItem);

    });

//slider

    //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('.reviews__list'),
            dur = 500;

        if (reqItem.length) {
            list.animate({
                'left': -reqIndex * 100 + '%'
            }, dur, function () {
                activeSlide.removeClass('active__slide');
                reqItem.addClass('active__slide');
            });
        }

    };

    //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;

        if ($this.hasClass('reviews__btn_next')) {
           existedItem = activeItem.next();
           edgeItem = items.first();  
        }

        if ($this.hasClass('reviews__btn_prev')) {
           existedItem = activeItem.prev();
           edgeItem = items.last();
        }

        reqItem = existedItem.length ? existedItem.index() : edgeItem.index();

        moveSlide(cont, reqItem);

    });

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <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>
</body>
</html>

空心代码https://jsfiddle.net/Maximus00000/9yfc26kb/48/

无法读取未定义的属性“长度”（jQuery）

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

无法读取未定义的属性“长度”（jQuery）

3 个回答

相关问题