向原型方法添加回调函数并设置此上下文

Question

我想在单击时显示对象的一些键值。每个按钮都有一个点击侦听器，为各种员工实例调用原型方法。

这工作正常。

但我希望输出方法在单击按钮时执行以下操作： - opacity:0，然后将#demo 的高度滑动到 1px（只是很小），然后当新的 innerHTML 值在#demo 中时，将高度动画回 30px，不透明度为 0。我尝试以多种方式传递回调函数，总是出现类型错误。下一个问题是如何在使用 addEventListener 时正确设置 this 上下文，是否有可能绕过为每个 eventListener 分配不同的函数？

function employee(name, jobtitle, born) {
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
this.callback = function(){};
 }

employee.prototype.output = function(){
var pee = document.querySelector("p");
pee.style.opacity = 0;

pee.style.height = "30px";
pee.style.opacity = 1;
return this.name + "is a " + this.jobtitle + " born in the year" + this.born};

Link 到代码笔：

http://codepen.io/damianocel/pen/MeaeGX

Javascript 拜托，我可以在 Jquery 中得到这个，但是对于在 vanilla JS 中如何发生这种情况还有一些学习要做。

Answer 1

您已经使用了 CSS transition，因此对于第一个问题，在放置文本并将高度设置回 [=14= 之前等待过渡完成是个问题]，否则你会立即中断动画。为此，您可以收听 transitionend 事件。

我还建议不要直接设置 style 属性，而是使用类。您还希望剪辑文本，以便在为高度设置动画时 not overflow。

对于第二个问题：您可以使用 bind 来创建一个已经具有 this 并可能固定了一些参数的函数引用。

以下是对这些点进行一些调整后的代码：

function employee(name, jobtitle, born) {
    this.name=name;
    this.jobtitle=jobtitle;
    this.born=born;
    this.callback = function(){};
}

employee.prototype.output = function(target){
    var whenHidden = function () {
        target.textContent = this.name + " is a " + this.jobtitle + 
                             " born in the year " + this.born;
        target.removeEventListener('transitionend', whenHidden);
        target.classList.remove('hide');
    }.bind(this);
    target.addEventListener('transitionend', whenHidden);
    target.classList.add('hide');
};

var fred = new employee("Fred Flintstone", "Caveman", 1970);
var mike = new employee("Mike Francois", "Wrestler", 1965);
var demo = document.getElementById("demo");
var output = employee.prototype.output;

document.getElementById("a").addEventListener('click', output.bind(fred, demo));
document.getElementById("b").addEventListener('click', output.bind(mike, demo));

p { 
  border:2px black solid;
  transition:.5s;
  height:30px;
  text-overflow: clip;
  overflow: hidden;
  opacity: 1;
}
p.hide {
  height: 1px;
  opacity: 0.1;
}

<button id="a">Fred</button>
<button id="b">Mike</button>
<button id="c">Tom</button>
<p id="demo"></p>

向原型方法添加回调函数并设置此上下文

Adding a callback function to a prototype method and setting this context

javascript

prototypal-inheritance