3

このコード ウィッチは、数字の 1 を星に変更するのにうまく機能しますが、1 ～ 5 のようないくつかの数字を同じ数の星 (*) に変更したい場合は、同じループ内でこれを行うか、番号ごとに 1 つずつ、5 つの異なるループを作成する必要がありますか?

function changeNumber()
{
    var elements= document.getElementsByClassName("grade");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        var text = element.innerHTML; 
        var x = text.replace('1','*');
        element.innerHTML=x;
    }

}

このコードは、ユーザーが入力した値を取得し、配列に配置します...

var button = $('#add');
    button.click(function() 
    {
        //funktion för vad som ska hända när man klickar på knappen
        var filmnamn = $('#name');
        var filmnamnet = filmnamn.val();
        var betyg = $('#star');
        var betyget = betyg.val();
        betyget = Number(betyget);

        if(filmnamnet == 0)
        {
            $('#name').css('background-color', 'red');

        }
        if(betyget == 0)
        {
            $('#star').css('background-color', 'red');

        }
        if(betyget == 0 || filmnamnet == 0)
        {
            alert("Vänligen fyll i fälten korrekt");

        }
        else
        {
            var array = new Array();
            array.unshift(betyget);
            array.unshift(filmnamnet);
            film_array.unshift(array);
            betyg_array.unshift(array);
            updateFilmList();

        }

    });

次に、関数 updateFilmlist は次のようになります...

    var film_list = $("#filmlista");
    var film_array = new Array();        

function updateFilmList()
    {
            document.getElementById("name").value = '';
            document.getElementById("star").value = 0;
            var filmen = film_array[0][0];
            var grade = film_array[0][1];
            var element = '<li class="lista">' + filmen + '<span class="betyg">'+ grade +'</span></li>';
            film_list.append(element);
            changeNumber();

    }

そして、あなたが私に見せてくれたコードをchangeNumber関数に追加したとき、スターに変更される唯一の数字は、動的に作成されたリストの最初のリスト要素です...その後、残りは数字として表示されます。なぜですか? ところで、betyg_arrayは別の関数用であり、問​​題とは何の関係もないので無視できます...

4

3 に答える 3

4

あなたのためのワンライナー：

var str = '8 rabbits, that\'s 16 rabbit ears';
str = str.replace(/(\d+)/g,function(a){return Array(+a+1).join('*')});
//=> ******** rabbits, that's **************** rabbit ears

【説明】

/(\d+)/g文字列から連続する数字のセット ( ) を抽出\dします (例: '1'、'15')。

+-operatorコールバック関数は、n 個の要素を持つ結合された配列を返します = Number ( 、ここでは+a)に変換された検出された数字のセット+a+1+1(1 を追加)。

[おまけString] このように拡張できます

String.prototype.replaceNumbersWithStr = function(str){
   str = str || '*'; // default to '*';
   return this.replace(/(\d+)/g,function(a){return Array(+a+1).join(str)});
}
// usage examples
'8 rabbits, that\'s 16 rabbit ears'.replaceNumbersWithStr();
 //=> ******** rabbits, that's **************** rabbit ears

'8 rabbits, that\'s 16 rabbit ears'
   .replaceNumbersWithStr('<span class="star"></span>');
 //=> <span class="star"></span><span class="star"> ...

そしてもう少し洗練された：

String.prototype.Num2Str = function(str){
   str = str || '*'; // default to '*';
   return this.replace(/\{(\d+)\}/g,function(a,b){return Array(+b+1).join(str)});
}
// usage example
'{2} rabbits, that\'s 4 rabbit ears'.Num2Str();
 //=> ** rabbits, that's 4 rabbit ears

'Stars: {2}'.Num2Str('<span class="star"></span>');
 //=> Stars: <span class="star"></span><span class="star">
于 2013-03-10T13:43:18.967 に答える
3

ワーキングデモ

それぞれまたはループの条件は必要ありません。

function changeNumber(){
    var elements= document.getElementsByClassName("grade");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        var length = parseInt(element.innerHTML);
        var x=Array(length+1).join("*");
        element.innerHTML=x;
    }
}
于 2013-03-10T13:41:02.623 に答える
2

Array(5).join("*")4つ星の文字列を提供します。きっとそこからわかると思います。

于 2013-03-10T13:42:19.297 に答える