请查看此代码段

Question

我想用原型样式编码制作代码。但是我遇到了困难 - 由于某些原因，onclick函数不想运行。

有人可以解释我的问题在哪里吗？

    function Voter(options) {
      this.elem = options.elem;
      this.voteElem = this.elem.querySelector('.vote');
    }

    Voter.prototype.onmousedown = function() { 
        return false;
    };

    Voter.prototype.onclick = function(event) { // this is my problem
      if (this.elem.closest('.down')) {
        this.voteDecrease();

      } else if (this.elem.closest('.up')) {
        this.voteIncrease();
      }
    };

    Voter.prototype.voteDecrease = function() {
      this.voteElem.innerHTML = +this.voteElem.innerHTML - 1;
      console.log(this.voteElem);
    }

    Voter.prototype.voteIncrease = function() {
      this.voteElem.innerHTML = +this.voteElem.innerHTML + 1;
    }

    Voter.prototype.setVote = function(vote, voteElem) {
        this.voteElem.innerHTML = +vote;
      };

    var voter = new Voter({
      elem: document.getElementById('voter')
    });

    voter.setVote(1);
    voter.onclick();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .down, .up {
      color:  blue;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="voter" class="voter">
    <span class="down">—</span>
    <span class="vote">0</span>
    <span class="up">+</span>
  </div>

  <script>
  </script>
</body>
</html>

Answer 1

您可能想要侦听最近/最近的点击事件，可以将构造函数更改为：

function Voter(options) {
  this.elem = options.elem;
  this.voteElem = this.elem.querySelector('.vote');

  this.elem.closest(".up").onclick = () => this.voteIncrease();
  this.elem.closest(".down").onclick = () => this.voteDecrease();
}

对于shure，您可以将其添加到额外的方法中，但我认为不需要。

Answer 2

closest函数获得祖先，而不是你的兄弟姐妹。
您需要将onclick事件绑定到previousElementSibling和nextElementSibling。
使用this.voteElem来获取您的兄弟姐妹。

请查看此代码段

function Voter(options) {
  this.elem = options.elem;
  this.voteElem = this.elem.querySelector('.vote');
}

Voter.prototype.onmousedown = function() {
  return false;
};

Voter.prototype.onclick = function(event) {
  var self = this;
  
  this.voteElem.previousElementSibling.onclick = function() {
    self.voteDecrease();
  };

  this.voteElem.nextElementSibling.onclick = function() {
    self.voteIncrease();
  };
};

Voter.prototype.voteDecrease = function() {
  this.voteElem.innerHTML = +this.voteElem.innerHTML - 1;
}

Voter.prototype.voteIncrease = function() {
  this.voteElem.innerHTML = +this.voteElem.innerHTML + 1;
}

Voter.prototype.setVote = function(vote, voteElem) {
  this.voteElem.innerHTML = +vote;
};

var voter = new Voter({
  elem: document.getElementById('voter')
});

voter.setVote(1);
voter.onclick();

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .down,
    .up {
      color: blue;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="voter" class="voter">
    <span class="down" id='down'>—</span>
    <span class="vote">0</span>
    <span class="up" id='up'>+</span>
  </div>

  <script>
  </script>
</body>

</html>

看到？你的原型逻辑现在正在运作。

。原型。不适用于eventListener

2 个答案:

请查看此代码段

资源