Question

我正在尝试将123abc2b的属性赋予被克隆的元素，该元素称为javascript。问题是translateX()甚至不引用克隆的元素，即使值本身在代码中进行克隆。

this.firstClone

在此之上，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')); }时，它指的是在DOM中具有this.firstClone的第二个元素。当我这样做时，该属性还将设置为第二个元素：console.log

这是一小段JavaScript吗？还是我只是误解了translateX(1%)和this.firstClone.style.transform = "translateX(" + (-1) + "%)";方法？

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

完整代码：

.first()

.clone()

'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();

*我在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>

Answer 2

问题在于pip uninstall tensorflow-gpu tensorflow-estimator tensorboard pip install tensorflow-gpu==1.12.0是jQuery对象，而不是DOM元素。但是this.firstClone是DOM属性。在jQuery中，您可以使用style函数来添加样式，因此应为：

.css()

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

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

您的代码在this.firstClone.css({ paddingBottom: 200 + 'px', transform: "translateX(-1%)" });循环中起作用，因为当您索引jQuery集合时，它返回相应的DOM元素（要获取jQuery对象，请使用for）。因此，您也可以将上面的代码写为：

.eq(i)

如何将CSS属性赋予Java克隆元素？

2 个答案: