Question

我有这个代码巫婆可以正常工作将第一个改成星号，但如果我想要像1-5这样的几个数字变成相同数量的星号（*），那么我可以在相同的循环还是我需要创建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，因为它是另一个函数而且与问题无关...

Answer 1

<强> Working demo

每个或一个循环都不需要条件。

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;
    }
}

Answer 2

给你一个oneliner：

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'）。

回调函数返回一个连接数组，其中包含n个元素=找到的数字转换为数字（+-operator，此处为+a）+a+1+1（加1），因为数组连接使用n个空元素'string'返回长度为n-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">

Answer 3

Array(5).join("*")会给你一串4星。我相信你可以从那里弄明白。

将数字变成星星？

3 个答案: