代码工作 jsfiddle 不能在 Dreamweaver 上工作答案

【问题标题】：Codes works jsfiddle not working on dreamweaver代码工作 jsfiddle 不能在 Dreamweaver 上工作
【发布时间】：2012-04-28 22:19:08
【问题描述】：

这似乎是一个更常见的问题，但是当我尝试使用 jsfiddle (html/css/javascript) 的代码时，它不起作用。我正在尝试让 CSS 动画重复 onclick，并在其他问题的链接上找到了一些链接到 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->â€‹ 出于某种原因出现。如果有人可以帮助我，将不胜感激。

【问题讨论】：

标签： javascript html css dreamweaver jsfiddle

【解决方案1】：

您的代码失败有两个原因。首先，您的代码中不同位置有两个非法字符。当您运行页面时，您可以看到出现在按钮旁边的一个，以及在 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>

【讨论】：

效果很好，谢谢.. 但是，我一直在按钮旁边看到â€‹。那是什么？
在结束按钮标签和开始脚本标签之间有一个字符。听起来它在您正在使用的编辑器中不可见（它不在我的）。尝试删除这两个标签之间的所有内容。

【解决方案2】：

您是否尝试在 Dreamweaver 浏览器中查看该站点？您正在使用 -webkit 属性。这些仅适用于 chrome 或 safari 等 webkit 浏览器。同样，-moz 标签只能在 Firefox 中使用。

我假设dreamweaver 不读取-webkit 标签。尝试使用-o 标记Opera，-webkit 标记Safari 和Chrome，-moz 标记Firefox，-ms 标记IE。 Chrome 和 safari 将读取 -webkit css 但忽略 -moz 和 -o 因为他们不知道如何阅读它。

W3学校有一些很好的例子，支持除IE之外的所有浏览器：http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4 http://www.w3schools.com/css3/css3_transitions.asp

如果添加-ms-transform，transform css 属性（代码中的-webkit-transform）将在 IE 中工作：http://www.w3schools.com/css3/css3_2dtransforms.asp

【讨论】：

jsfiddles 在 chrome 中为我工作。你是在本地测试吗？如果是这样，您确定所有链接都正确吗？尝试 view-source: 并检查浏览器看到的所有链接。
jsfiddle 可以工作，但是当我将它复制到 Dreamweaver 中时，它停止了......是的，它们很好。
复制到dreamweaver后如何查看？我认为 dreamweaver（“dreamweaver 浏览器”）中的设计选项卡不会读取浏览器特定的标签。
不，我先在浏览器中预览，然后在 Chrome 中预览