Javascript 重构以下代码以使用jQuery

我有一些代码添加了不是用jQuery编写的事件侦听器

pic1.addEventListener("webkitTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("oTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("transitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);

现在我想用jQuery添加eventListeners，并维护相同的功能。关于这应该是什么样子的想法

这是我正在做的一个草图。。。

---

您应该能够在一个命令中绑定所有3个事件，如下所示。我还包括了设置类和zindex的jQuery等价物

$(pic1).bind('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

或

---

您应该能够在一个命令中绑定所有3个事件，如下所示。我还包括了设置类和zindex的jQuery等价物

$(pic1).bind('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

或

---

我不确定你是否对这个问题做了足够的研究，但我可以让你相信这一点。jQuery在上有

，这是绑定事件的推荐方法。此外，它还提供了一个针对这种情况的快捷方式：

$(pic1).on("webkitTransitionEnd oTransitionEnd transitionEnd",
function(){
    pic1.className="down";
    pic1.style.zIndex=picclick;
});

将所有事件都集中在一个这样的事件中意味着您可以避免重复代码。
我不确定您是否对这个问题做了足够的研究，但我可以告诉您一个疑问。jQuery在

上有

，这是绑定事件的推荐方法。此外，它还提供了一个针对这种情况的快捷方式：

$(pic1).on("webkitTransitionEnd oTransitionEnd transitionEnd",
function(){
    pic1.className="down";
    pic1.style.zIndex=picclick;
});

将所有事件放在一个类似的位置意味着您可以避免重复代码。
事件侦听器可以在jquery中替换为
。on
或
。bind
语句：

var pic1 = $('yourElementOrClass');

pic1.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).addClass('down').css('z-index', picclick);
});

事件监听器可以在jquery中替换为
.on
或
.bind
语句：

var pic1 = $('yourElementOrClass');

pic1.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).addClass('down').css('z-index', picclick);
});

我并不是想表现得尖刻，但到目前为止，您尝试过做些什么（例如，在Jquery中？）。另外，您所说的“没有jQuery就无法编写的事件侦听器”是什么意思？您可以使用jQuery的
bind
或
处理程序上的
来执行此操作。看到了吗？为什么你要重复同样的代码3次？给你：。@Nick别担心会被嘲笑，你们问的问题很好。我在一个类似jsfiddle、jsdo.it的网站上完成了这个项目，我正在努力学习@Eugene，我真的不知道前一位作者为什么会这样重复自己，我想是因为
WebKittTransitionEnd
oTransitionEnd
和
transitionEnd
@David之间的差异，你可以定义一次事件处理程序（
函数处理程序（）{this.className=…；}
然后重用它：
pic1.addEventListener（'WebKittTransitionEnd'，handler）；pic1.addEventListener（'otTransitionEnd'，handler）；…
。我并不是想装腔作势，但到目前为止（例如，在Jquery中）您尝试过做什么。另外，您所说的“没有Jquery的情况下编写的事件侦听器”是什么意思你可以使用jQuery的
bind
或
处理程序来实现这一点。见下文为什么你要重复同样的代码3次？给你：。@Nick别担心被人嘲笑，你们问的问题很好。我在一个类似于jsfiddle，jsdo.it的网站上完成了这个项目，我正在努力学习。@Eugene，我真的不知道为什么前一位作者会这样重复自己，我想是因为
webkittransionend
otransionend
和
transitionEnd
@David:您可以定义一次事件处理程序（
function handler（）{this.className=…；}
然后重用它：
pic1.addEventListener（'WebKittTransitionEnd'，handler）；pic1.addEventListener（'otTransitionEnd'，handler）；…
@Kosmetika-我很清楚addClass/removeClass。使用attr（）与原始问题中所做的工作更接近。@Kosmetika这是完全不同的功能。这需要设置类，而不是通过它进行过滤。@Kosmetika:
$（'.class'）
选择带有class
class
element.attr（'class'，foo'）的元素
将
元素的
class
属性设置为
foo
。两个完全不同的东西。@DavidWest-yeah-sure，检查我的答案@Kosmetika:我按原始代码操作。和
pic1.className=“down”
覆盖现有的类。我想这是OP想要的，否则，他们为什么要使用它？不需要在这里进行推测。@Kosmetika-我很清楚addClass/removeClass。使用attr（）与原始问题中所做的工作更接近。@Kosmetika这是完全不同的功能。这需要设置类，而不是通过它进行过滤。@Kosmetika:
$（'.class'）
选择带有class
class
element.attr（'class'，foo'）的元素
将
元素的
class
属性设置为
foo
。两个完全不同的东西。@DavidWest-yeah-sure，检查我的答案@Kosmetika:我按原始代码操作。和
pic1.className=“down”；
覆盖现有的类。我想这就是OP想要的，否则，他们为什么要使用它？这里不需要推测其他。