Question

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

这很好用。

但是我希望输出方法在单击按钮时执行以下操作： - 不透明度：0，然后将#demo的高度滑动到1px（非常小），然后当新的innerHTML值在#demo中时，将高度设置为30px，不透明度设置为0。我试图以多种方式传递回调函数，总是得到类型错误。下一个问题是在使用addEventListener时如何正确设置此上下文，是否可以为每个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};

链接到codepen：

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

Javascript only please，我可以在Jquery中得到这个，但是仍然有一些学习如何在vanilla JS中发生这种情况。

Answer 1

您已经使用了CSS transition，因此对于第一个问题，在放置文本并将高度设置回30px之前等待转换完成，否则您将中断立即动画。为此，您可以收听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>

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

1 个答案: