javascript - 我如何将 CSS 属性作为 Javascript 赋予克隆元素？

Question

我正在尝试将 translateX() 属性赋予被称为 this.firstClone 作为 javascript 的克隆元素。问题是 this.firstClone 没有引用克隆的元素，即使值本身在代码中进行克隆也是如此。

constructor($el) {
  this.$el = $el; // 0
  this.myCards = this.$el.find('a'); // 1
  this.myCount = 1; // 2
  this.myLength = this.myCards.length; // 3
  this.firstClone = this.myCards.first().before(this.myCards.last().clone().addClass('cloned')); // 4 this makes the clone.
  this.lastClone = this.myCards.last().after(this.myCards.first().clone().addClass('cloned'));
}

在上面，this.firstClone 将最后一张图像克隆到集合中的第一张图像。而且当我删除它时，克隆的元素也消失了。制作、设置或删除克隆图像都没有问题。

但是当我 console.log 它时，它引用了 DOM 中具有 translateX(1%) 的第二个元素。当我这样做时，该属性也将设置为第二个元素:this.firstClone.style.transform = "translateX("+ (-1) + "%)";

这是 javascript 的故障吗？还是我只是误解了 .first() 和 .clone() 方法？

我的目标是为每个克隆元素提供 css 属性，但我没有任何线索就卡在这里。

完整代码:

'use strict';
(function ($, window, undefined) {
  $.fn.cardSlider = function(options) {
    return this.each(function() {
      const $el = $(this);
      var thatCards = new Card($el, options);
          thatCards.scrolling($el);
    })
  }
  class Card {
    constructor($el) {
      this.$el = $el; // 0
      this.myCards = this.$el.find('a'); // 1
      this.myCount = 1; // 2
      this.myLength = this.myCards.length; // 3
      this.firstClone = this.myCards.first().before(this.myCards.last().clone().addClass('cloned')); // 4 this makes the clone.
      this.lastClone = this.myCards.last().after(this.myCards.first().clone().addClass('cloned'));
    }
    scrolling($el) {
      console.log(this.firstClone); 
      this.firstClone.style.transform = "translateX(" + (-1) + "%)"; // Browser fires an error. Cannot set property 'transform' of undefined
      this.firstClone.css({
        paddingBottom: 200 + 'px'
      }); // An example for proving that the css property doesn't refer to the real clone.
      for (var i = 0; i < this.myLength; i++) {
        this.myCards[i].style.transform = "translateX(" + Math.pow(2, i) + "%)";
      }
    }
  }
}(jQuery));
$('.outer').cardSlider();

.outer {
  margin: 0 auto;
  width: 70%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: center;
  left: 90%;
}
.images {
  position: relative;
  display: block;
  width: 90%;
  flex-shrink: 0;
  padding-bottom: 74%;
  background-color: blue;
}

.images:first-child, .images:last-child {
  background-color: orange;
  opacity: .4;
}

    <div class="outer">
      <div class="film">
        <a class="images" href="#" draggable="false"></a>
        <a class="images" href="#" draggable="false"></a>
        <a class="images" href="#" draggable="false"></a>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

*我在 Codepen 和这里测试了这段代码，但都没有用。您可能必须制作新文件来测试它。

Answer 1

您的代码非常困惑，但我认为您遇到的一个问题是您将错误的元素分配给了firstClone。和 lastClone .您可能希望这些变量是对新克隆的引用，但这不是您的代码所做的。

让我们看看这一行:

this.firstClone = this.myCards.first().before(this.myCards.last().clone().addClass('cloned'));

• 首先，克隆最后一张卡片并添加类 cloned ( this.myCards.last().clone().addClass('cloned') )

• 然后，将该克隆传递给函数 before第一张卡片 ( this.myCards.first().before(...) )

• 最后，您分配函数before返回变量 this.firstClone

问题是表达式 a.before(b)插入 b之前a然后返回a 。不过，您要保存的是对 b 的引用, 不是 a .

你必须使用函数 insertBefore反而。它与 before 完全相同，但反过来:b.insertBefore(a)还插入 b之前a ，但这 返回 b .

(看这里的区别:https://www.mkyong.com/jquery/jquery-before-and-insertbefore-example/)

所以我们看的那一行应该是:

this.firstClone = this.myCards.last().clone().addClass('cloned').insertBefore(this.myCards.first());

这样，您的变量 this.firstClone持有对新创建的克隆的引用，而不是(以前的)第一个元素。之后的行也是如此:

this.lastClone = this.myCards.first().clone().addClass('cloned').insertAfter(this.myCards.last());

希望这能解决您的问题。

在上下文中使用:

'use strict';
(function ($, window, undefined) {
  $.fn.cardSlider = function(options) {
    return this.each(function() {
      const $el = $(this);
      var thatCards = new Card($el, options);
          thatCards.scrolling($el);
    })
  }
  class Card {
    constructor($el) {
      this.$el = $el; // 0
      this.myCards = this.$el.find('a'); // 1
      this.myCount = 1; // 2
      this.myLength = this.myCards.length; // 3
      this.firstClone = this.myCards.last().clone().addClass('cloned').insertBefore(this.myCards.first()); // 4 this makes the clone.
      this.lastClone = this.myCards.first().clone().addClass('cloned').insertAfter(this.myCards.last());
    }
    scrolling($el) {
      console.log(this.myCards[1]); // Both refers the same element
      this.firstClone.css({
        paddingBottom: 200 + 'px'
      });
      for (var i = 0; i < this.myLength; i++) {
        this.myCards[i].style.transform = "translateX(" + Math.pow(2, i) + "%)";
      }
    }
  }
}(jQuery));
$('.outer').cardSlider();

.outer {
  margin: 0 auto;
  width: 70%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: center;
  left: 90%;
}
.images {
  position: relative;
  display: block;
  width: 90%;
  flex-shrink: 0;
  padding-bottom: 74%;
  background-color: blue;
}

.images:first-child, .images:last-child {
  background-color: orange;
  opacity: .4;
}

    <div class="outer">
      <div class="film">
        <a class="images" href="#" draggable="false"></a>
        <a class="images" href="#" draggable="false"></a>
        <a class="images" href="#" draggable="false"></a>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>