我如何将 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'))

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

• 最后，你将函数before返回的任何东西赋值给变量this.firstClone

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

您必须改用函数insertBefore。它与before 完全相同，但反过来：b.insertBefore(a) 也在a 之前插入b，但这返回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>

Answer 2

问题在于this.firstClone 是一个jQuery 对象，而不是一个DOM 元素。但是style 是一个 DOM 属性。在 jQuery 中，你使用 .css() 函数来添加样式，所以它应该是：

this.firstClone.css("transform", "translateX(-1%)");

或者您可以将其作为以下内容的一部分：

  this.firstClone.css({
    paddingBottom: 200 + 'px',
    transform: "translateX(-1%)"
  });

您的代码在 for 循环中工作，因为当您索引 jQuery 集合时，它会返回相应的 DOM 元素（要获取 jQuery 对象，您使用 .eq(i)）。所以你也可以把上面写成：

this.firstClone[0].style.transform = "translateX(-1%)";