Javascript var在-webkit-transform中不起作用答案

【问题标题】：Javascript var not working in -webkit-transformJavascript var在-webkit-transform中不起作用
【发布时间】：2014-02-11 15:49:56
【问题描述】：

这是我的代码：

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


<style>
body {
    text-align: center;
    width: 100%;}

#container {
transform: rotate(30deg);
transform-origin: bottom center;
-ms-transform: rotate(30deg); /* IE 9 */
-ms-transform-origin: bottom center;
-webkit-transform: rotate 0deg; /* Safari and Chrome */
-webkit-transform-origin:bottom center;
border: 1px solid black;
width: 152px;
margin: 40px auto;
height: 244px;
overflow: visible;
}
</style>

<script>      
var meteo = (function () {
    var meteo = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "http://api.openweathermap.org/data/2.5/weather?q=Leicester&units=metric",
        'dataType': "json",
        'success': function (data) {
            meteo = data;
        }
    });
    return meteo;
})(); 

var vento_forza = meteo.wind.speed;
var vento_direzione = meteo.wind.deg+"deg";    
</script>
</head>

<body>
<div id="container">
    <svg version="1.1" id="indicator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="152px" height="244px" viewBox="0 0 152 244" enable-background="new 0 0 152 244" xml:space="preserve">
    <polygon fill="#84FFFB" points="0,244 76,207 152,244 "/>
    <polygon fill="#D6F4FF" points="76,0 76,207 152,244 "/>
    <polygon fill="#00A5EC" points="76,0 76,207 0,244 "/>
</svg>
</div>

<script>

function direzione(){
    document.getElementById("container").style.webkitTransform = "rotate(vento_direzione)"
}
</script>
<input type="button" onclick="direzione()" value="Change link">
</body>
</html>

基本上，当我单击按钮时，我希望容器 div 的旋转根据 var vento_direzione（它是从 api 请求中获得的数字，我附加了一个“deg”字符串）而变化；可悲的是，这似乎没有发生。如果我只是在函数内部传递一个值而不是 var，那么一切正常。我做错了什么？

请帮忙！干杯！

【问题讨论】：

好样的！现在它正在工作，谢谢！你能解释一下那些++是什么吗？为什么传递存储在var中的字符串不正确？
@AndreaLigios，他在感谢我，但我删除了我的评论并将其作为解释他需要的字符串连接的答案。
谜团解决了：D @Neurone ora dovresti accettare la risposta cliccando sulla V bianca nell'angolo in alto a sinistra della stessa...
啊哈哈我没疯，对错字感到抱歉。谢谢大家。

标签： javascript jquery css rotation transform

【解决方案1】：

你想要的

document.getElementById("container").style.webkitTransform = "rotate("+vento_direzione+")";

因为你只是试图将文字字符串“rotate(vento_direzione)”传递给它，所以当它们在这样的字符串中时，变量不会被它们的值替换。

所以你需要做的是用vento_direzione变量连接实际的字符串部分“rotate(”和“)”："rotate("+vento_direzione+")"是字符串连接

【讨论】：