4

ボタンをクリックすると、段落内のランダムな文字の色を赤に変更したいと考えています。私のコードを見つけてください。これにはいくつかのエラーがあります。

$('input').click(function(){

   var para = $('#para');
   var position = Math.floor(Math.random()*100);
   var character = [];

   var i=0
   while ( i <= 30 )
   {
      character[i] = para.html().substr(position*(i+1), 1);
      i++;
   }

   $.each(character, function() {
     character.css('color','red');
   });

});

まず、段落から 30 個のランダムな文字を含む配列を作成しました。次にeach()、配列内の各要素を繰り返し処理して css プロパティを適用しました。しかし、オブジェクトにメソッド 'css' がないというエラーがコンソール ウィンドウに表示されます。

私は何を間違っていますか？

4

2 に答える 2

3

まず、CSS メソッドは jquery オブジェクトに対してのみ機能します。文字配列に文字列があります。css メソッドは文字列では機能しません。

第二に、あなたの各メソッドは間違って書かれています。このようになるはずです

$.each(character, function(index, value) {
    // Do something
});

問題の説明では、文字列内のランダムな文字の色を変更します。ここにフィドルがあります。これを試してみてください。

コードは次のとおりです。

$('input').click(function(){

var para = $('#para');
var charArray = $('span', para);

// case: No span (Initial String)
if (charArray.length === 0) {
    var html = para.html();
    var newArr = [];
    var len = html.length;
    for (var i=0; i<len; i++) {
        newArr.push('<span>' + html[i] + '</span>');
    }
    html = newArr.join('');
    para.html(html);
    charArray = $('span', para);
}

// Reset all spans
$.each(charArray, function(i, value) {
    value.style.color = '';
});

var paralen = charArray.length;

for (var i=0; i<30; i++) {
    var pos = Math.floor(Math.random()*100);
    pos = pos % paralen;
    charArray[pos].style.color = 'red';
}

});
于 2013-03-15T12:17:13.717 に答える
2

$.eachのドキュメントを確認する必要があります。考えられる解決策：

$('input').click(function() {

    var $para = $('#para');
    var position = Math.floor(Math.random()*100);
    var character = [];

    for ( var i=0; i <= 30; i++ ) {
        character[i] = $("<span>" + $para.text().substr(position*(i+1), 1) 
                                  + "</span>");
        character[i].css('color', 'red');
    }

    $para.empty();

    $.each(character, function(idx, val) {
        $(val).appendTo($para);
    });
});
于 2013-03-15T12:21:29.237 に答える