3

我有这个代码可以很好地将数字一变成一颗星，但是如果我想要像 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 ，因为它用于另一个功能并且与问题无关......

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

回调函数返回一个包含 n 个元素的连接数组 = 转换为 Number ( +-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">
于 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 回答