0

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Esileht</title>
    <link rel="stylesheet" href="prax2.css" />
</head>
<body>
    <div id="stuff">
        <a href="" class="btn" id="stuff_btn">START</a><br />
    </div>
    <div class="span10" id="word_place">
        <div class="word_grid" id="word_place_grid">
            <ul>
            </ul>
        </div>
    </div>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="prax2.js"></script>
</body>
</html>

这是在 prax2.js 文件中无法正常运行的 jQuery：

$('#stuff_btn').on('click', function(){
    var words = ["arvuti","pudel","mudel","blaaah","shfuiah","ashcfah"];
    var random = Math.floor(Math.random() * words.length);
    var word = words[random];   
    var chars = word.split('');
    chars = _.shuffle(chars);
    for(var i in chars)
    {
        $('#word_place_grid ul').append('<li class="letter">' +  i +  '</li>');
    }
})

问题是我想将已洗牌的字母添加到ul. 每个字母都是一个li. 问题是我得到的都是 1-6 的数字，当我尝试在该脚本运行之间记录结果时，有时我会在控制台中得到结果，有时不会，而且它总是只显示一个毫秒左右。

谁能发现问题？它是在我的 html 或脚本中还是在其他地方？

4

4 回答 4

3

您正在使用一个for-in语句，它遍历数组的键/属性。

for(var i in chars)...

i在 for 中指的是索引，而不是数组的实际元素。虽然，chars[i]可以在这里工作，但它也会打印添加到Array.prototype. 也就是说，Array.prototype.someProperty = 'a property'会导致'a property'被显示。

利用

for(var i = 0, len = chars.length; i < len; i ++) {
   //use the value of chars[i];
}

或者更好地使用forEach：

chars.forEach(function(ch) {
  $('#word_place_grid ul').append('<li class="letter">' +  ch +  '</li>');
});

这个例子有效。

JS Bin 演示

于 2013-09-17T06:35:16.823 回答
1

您已将事件处理程序附加到链接（到当前页面）。

JS 运行。文档更新。链接被跟踪。页面被重新加载。

<input type="button">如果您想拥有仅适用于 JS 的交互性，请使用 an 。

如果要使用链接，则链接到具有等效功能的服务器端脚本（渐进增强很好），然后如果 JS 运行成功，则取消事件的默认行为。

$('#stuff_btn').on('click', function(evt){ // Capture the event object
// ...
    }
    evt.preventDefault();
})
于 2013-09-17T06:33:03.653 回答
0

由于 i 是索引的 for 循环，您会看到数字。尝试：

for(var i in chars)
{
    $('#word_place_grid ul').append('<li class="letter">' +  chars[i] +  '</li>');
}
于 2013-09-17T06:34:21.380 回答
0

用于e.preventDefault()防止<a>. 并确保您的脚本在document.ready函数内部

$(function(){
$('#stuff_btn').on('click', function(e){
 e.preventDefault();
var words = ["arvuti","pudel","mudel","blaaah","shfuiah","ashcfah"];
var random = Math.floor(Math.random() * words.length);
var word = words[random];   
var chars = word.split('');
chars = _.shuffle(chars);
for(var i in chars)
{
  $('#word_place_grid ul').append('<li class="letter">' +  i +  '</li>');
}
})
});
于 2013-09-17T06:34:44.477 回答