Question

我刚开始学习一些oop和设计模式，所以我有这个例子：

function Img(imgId, imgSrc, imgClass) {
      this.imgId = imgId || '';
      this.imgSrc = imgSrc || '';
      this.imgClass = imgClass;
      
      let elm = document.createElement('img');
      elm.setAttribute('id', this.imgId);
      elm.setAttribute('src', this.imgSrc);
      elm.classList.add(this.imgClass);

      var xyz = document.getElementById('xyz');

      this.createImage = function() {
        xyz.appendChild(elm);
      }
    }

    var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

    var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img img-wide').createImage();

<div action="" id="xyz">
      
  </div>

因此，如果我尝试使用多个类作为函数参数，我会收到错误。

我想了解什么以及如何克服它。

Answer 1

您需要将类拆分为单独的字符串并单独应用每个字符串

function Img(imgId, imgSrc, imgClass) {
      this.imgId = imgId || '';
      this.imgSrc = imgSrc || '';
      this.imgClass = imgClass;
      
      let elm = document.createElement('img');
      elm.setAttribute('id', this.imgId);
      elm.setAttribute('src', this.imgSrc);

      this.imgClass.split(' ').forEach(function(singleClass) {
          elm.classList.add(singleClass);
      })

      var xyz = document.getElementById('xyz');

      this.createImage = function() {
        xyz.appendChild(elm);
      }
    }

    var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

    var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img img-wide').createImage();

<div action="" id="xyz">
      
  </div>

Answer 2

您收到错误，因为空格不是类名中的有效字符。而是传递单个字符串，并将它们作为rest参数接收。

然后，您可以使用扩展语法将类列表传递给classList.add()。

 
// Receive all the classes--------v
function Img(imgId, imgSrc, ...imgClass) {
  this.imgId = imgId || '';
  this.imgSrc = imgSrc || '';
  this.imgClass = imgClass;

  let elm = document.createElement('img');
  //elm.setAttribute('id', this.imgId);
  //elm.setAttribute('src', this.imgSrc);

  // This is shorter than using `.setAttribute()`
  elm.id = this.imgId;
  elm.src = this.imgSrc;

  elm.classList.add(...this.imgClass); // Add all the classes

  var xyz = document.getElementById('xyz');

  this.createImage = function() {
    xyz.appendChild(elm);
  }
}

var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img', 'img-wide').createImage();

<div action="" id="xyz">

</div>

Answer 3

只需使用.className属性即可。在那里你可以一次设置多个类。

例如：

elm.className = this.imgClass;

或者，如果已经为该元素定义了一个类，只需将其与+运算符一起使用，但请注意，您必须插入一个空格作为分隔符：

elm.className += " " + this.imgClass;

添加参数以实现功能

3 个答案: