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 の数字しか取得できないことです。そのスクリプトの実行中に結果をログに記録しようとすると、コンソールに結果が表示される場合と表示されない場合があり、常に表示されるのは 1 回のみです。ミリ秒かそこら。

誰でも問題を見つけることができますか? それは私のhtmlまたはスクリプトにありますか、それとも他の場所にありますか?

4

4 に答える 4

3

for-in配列のキー/プロパティを反復処理するステートメントを使用しています。

for(var i in chars)...

ifor 内では、配列の実際の要素ではなく、インデックスを参照します。は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 ビンのデモ

于 2013-09-17T06:35:16.823 に答える
1

イベント ハンドラーを (現在のページへの) リンクに添付しました。

JS が実行されます。ドキュメントの更新。リンクがたどられます。ページがリロードされます。

<input type="button">JS でのみ機能する対話性が必要な場合は、を使用します。

リンクを使用する場合は、同等の機能を持つサーバー サイド スクリプトにリンクし (プログレッシブ エンハンスメントが適切です)、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 に答える