jQuery 无法正确执行

jQuery does not execute correctly

本文关键字：执行 jQuery      更新时间：2023-09-26

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

您正在使用 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斌演示

您已将

事件处理程序附加到链接（指向当前页面）。

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

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

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

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

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

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

使用 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>');
}
})
});
相关文章：