Question

这是我的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或脚本中，还是在其他地方？

Answer 1

您正在使用for-in语句，该语句会迭代数组的键/属性。

for(var i in chars)...

for中的

i引用索引，而不是数组的实际元素。虽然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 Demo

Answer 2

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

JS运行。文件更新。链接得到遵循。页面重新加载。

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

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

$('#stuff_btn').on('click', function(evt){ // Capture the event object
// ...
    }
    evt.preventDefault();
})

Answer 3

你看到的数字是因为for循环，其中i是索引。尝试：

for(var i in chars)
{
    $('#word_place_grid ul').append('<li class="letter">' +  chars[i] +  '</li>');
}

Answer 4

使用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>');
}
})
});

jQuery无法正确执行

4 个答案: