从字符串中提取内部内容答案

【问题标题】：Extract inner content from a string从字符串中提取内部内容
【发布时间】：2013-08-13 00:57:00
【问题描述】：

这是我面临的问题 - 我有一个名为 ('myDiv') 的 div。我设置了一个 setInterval 函数，它每 2 秒运行一次。我想要的是每次执行 setInterval 时，我都想额外旋转 div '15deg'。

我几乎做到了。但是当我做一些字符串操作时，它就出错了。 //这里是代码。

//css变换所需值=15ddeg不是'15deg' 那么如何将'15deg'提取到15deg（没有qoute）

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<script>

      $(function(){
        var foo = setInterval('animateDiv()', 2000);
    var count = 15;

    function animateDiv(){
       //console.log(count);

    count += 10;

       $('.myDiv').css({'-webkit-transform':'rotate(count + "deg")'});

      //console.log(count + "deg");
    }
      });

</script> 
<title>JS Bin</title>
</head>
<body>
  <div class='myDiv'></div>
</body>
</html>

【问题讨论】：

永远不要在字符串中使用setInterval/setTimeout，因为那样他们就会使用魔鬼eval！

标签： jquery css string transform

【解决方案1】：

http://jsfiddle.net/RWQSC/

(function(){
        var intId = setInterval(animateDiv, 2000),
            count = 15,
            $myDiv = $('.myDiv'); //Cache the div so we don't keep looking though the DOM for the same element. 

    function animateDiv(){
       console.log(count);
       count += 10;
       $myDiv.css({'-webkit-transform':'rotate(' + count +'deg)'});
       //console.log(count + "deg");
    }

}());

【讨论】：

【解决方案2】：

两个问题，

首先，设置你的转换，你实际上是在值字符串中使用字符串'count'，你需要将count的值连接到字符串而不是仅仅使用字符串：

$('.myDiv').css({'-webkit-transform':'rotate('+count+'deg)'});

其次，您会收到一个 JavaScript 控制台错误，它无法找到函数 animateDiv，因为您的函数不是全局函数，实际上是在 on-load 事件中，您无法通过字符串名称找到它相反，尝试直接传入函数（注意，不要包含括号，我们不想调用函数，我们只是将其分配为参数）：

var foo = setInterval(animateDiv, 2000);

【讨论】：

【解决方案3】：

我不明白你的问题，但你可以这样做

var index = deg.indexOf('\'');
var LastIndex = deg.LastIndexOf('\'');
deg = deg.substring(index+1,LastIndex);

【讨论】：

【解决方案4】：

这似乎有效：

function animateDiv() {
    // console.log(count);

    count += 10;

    $('.myDiv').css({
        '-webkit-transform': 'rotate(' + count + 'deg)'
    });

    //console.log(count + "deg");
}

var count = 15;
var foo = setInterval(animateDiv, 500);

jsFiddle

【讨论】：

【解决方案5】：

Fiddle!

var count = 15;

function animateDiv(){
    count += 10;
    $('#myDiv').css({'-webkit-transform': 'rotate(' + count + 'deg)'});
    console.log('rotate(' + count + 'deg)');
}

var foo = setInterval(animateDiv, 2000);

【讨论】：

【解决方案6】：

如果你想要最快的速度，你不应该使用 jQuery，你应该在animateDiv之外缓存你的元素。

永远不要在字符串中使用setInterval/setTimeout，因为那样他们就会使用魔鬼eval！

var el = document.getElementsByClassName('myDiv')[0],
    count = 15,
    foo = setInterval(animateDiv, 2000);
function animateDiv(){
    count += 10;
    el.style.transform = 'rotate('+count + 'deg)';
}

演示：http://jsfiddle.net/thdyL/1/

编辑：

如果你想进一步提高速度（但你会失去可读性），你也可以使用

var style = document.getElementsByClassName('myDiv')[0].style,
    count = 15,
    foo = setInterval(animateDiv, 2000);
function animateDiv(){
    style.transform = 'rotate('+ (count += 10) + 'deg)';
}

您应该考虑使用id 而不是class，因为它只是一个元素。

【讨论】：

为什么投反对票？是因为我说 如果你想要最大速度，你不应该使用 jQuery 吗？哦不，jQuery is taking over the world!