javascript - 代码有效 jsfiddle 不适用于 Dreamweaver-6ren

javascript - 代码有效 jsfiddle 不适用于 Dreamweaver

转载作者：太空宇宙更新时间：2023-11-04 05:06:17

这似乎是一个更常见的问题，但是当我尝试使用 jsfiddle (html/css/javascript) 的代码时，它不起作用。我正在尝试让 CSS 动画重复点击，并在其他问题的链接上找到了一些可以工作的 jsfiddle。但是，当我尝试在 DreamWeaver 上执行它们时它们不起作用，而且我没有收到任何错误。

我有 http://jsfiddle.net/vxcYJ/45/ , http://jsfiddle.net/AndyE/9LYAT/ , 和 http://jsfiddle.net/6tZd3/ , 并且没有工作。在 Dreamweaver 上，我相信第三个 jsfiddle 会翻译成这样:

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}

.initial {
    -webkit-transform: rotate(0deg);
}

.final {
    -webkit-transform: rotate(360deg);
}
</style>
<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});

document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</head>

<body>
<button type="button" id="button" class="animate initial">Click me!</button>
</body>
</html>

还有一件事，在按钮的末尾，由于某种原因出现了 this-â€‹。如果有人可以帮助我，那将不胜感激。

最佳答案

您的代码失败有两个原因。首先，您的代码中的不同位置有两个非法字符。当您运行页面时，您可以看到它出现在按钮旁边，第二个在 webkitTransitionEnd 事件监听器之后导致 JavaScript 出错。其次，当您尝试将事件监听器添加到文档头部的按钮时，它会失败，因为 DOM 尚未在浏览器中注册。

下面的代码应该可以工作。您也可以考虑查看 jQuery document ready function .

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}

.initial {
    -webkit-transform: rotate(0deg);
}

.final {
    -webkit-transform: rotate(360deg);
}
</style>

</head>

<body>
<button type="button" id="button" class="animate initial">Click me!</button>

<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});

document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</body>
</html>