Question

我经历了与该问题类似的大多数答案，并且尝试了不同的实现，但是没有运气。您会在我的代码中看到在我尝试过不同方法的地方有很多注释。但是，没有一个对我有用。

 <script>
    function GenerateRandomColor(ele) {
        var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
        ele.css('color', colors[Math.floor(Math.random()*9)]);
        ele.css('font-weight', bold);
        //return;
    }
    $(document).ready(function () {
        var elements = $(".impt");
        var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
        for(var i=0; i<elements.length; i++){
            var element = elements.eq(i);
            //do something with element'
            element.css('color', colors[Math.floor(Math.random()*9)]);
            element.css('font-weight', bold);
            //continue;
            //GenerateRandomColor(element);
        }
        /*var spanObjs = document.querySelectorAll('.impt');
        Array.prototype.forEach.call(spanObjs, function(elements, index) {
            GenerateRandomColor($(elements)); 
        });*/
        /*$('.impt').each(function(i, obj) {
            GenerateRandomColor($(obj)); 
        });*/
    });
</script>

我的目标是：我有一个段落，其中有多个跨度，以强调其中的几个重要单词。因此，跨度都有类的影响。我想使文本颜色随机，并且所有单词都加粗。

所有实现都给我相同的结果。第一个跨度会变色并加粗，但仅此而已。

Answer 1

您需要在引号中加粗

https://jsfiddle.net/x4rsyh8n/

您应该打开控制台，以便将来查看javascript错误。

<script>
    function GenerateRandomColor(ele) {
        var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
        ele.css('color', colors[Math.floor(Math.random()*9)]);
        ele.css('font-weight', 'bold');
        //return;
    }
    $(document).ready(function () {
        var elements = $(".impt");
        var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
        for(var i=0; i<elements.length; i++){
            var element = elements.eq(i);
            //do something with element'
            element.css('color', colors[Math.floor(Math.random()*9)]);
            element.css('font-weight', 'bold');
            //continue;
            //GenerateRandomColor(element);
        }
        /*var spanObjs = document.querySelectorAll('.impt');
        Array.prototype.forEach.call(spanObjs, function(elements, index) {
            GenerateRandomColor($(elements)); 
        });*/
        /*$('.impt').each(function(i, obj) {
            GenerateRandomColor($(obj)); 
        });*/
    });
</script>

Answer 2

我必须在代码中添加一件事，并且效果很好。这是更新的代码：

<script>
    $(document).ready(function () {
        var elements = $(".impt");
        var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
        for(var i=0; i<elements.length; i++){
            var element = elements.eq(i);
            //do something with element'
            element.css('color', colors[Math.floor(Math.random()*9)]);
            element.css('font-weight', "bold");
        }
    });
</script>

粗体必须用引号引起来。希望这对其他人有帮助！

Answer 3

您的代码有一些问题：

1） ele.css('font-weight', bold);应该是ele.css('font-weight', 'bold');

2）您可以通过获取9的长度来替换colors的已编码长度，即用此Math.floor(Math.random()*9)替换Math.floor(Math.random()*(colors.length - 1)) < / p>

最后，您的所有代码都可以总结为以下代码：

function GenerateRandomColor(ele)
{
    var colors = ["red", "orange", "blueviolet", "darkorchid", "midnightblue", "lightblue", "aqua", "darkgreen","lime", "orangered"];
    ele.css({
        'color': colors[Math.floor(Math.random()*(colors.length - 1))],
        'font-weight': "bold"
    });
}

$(document).ready(function()
{
    var elements = $(".impt");

    for (var i = 0; i < elements.length; i++)
    {
        GenerateRandomColor(elements.eq(i));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>I'm some <spam class="impt">random</spam> text with <spam class="impt">ramdom</spam> colors</p>

jQuery循环仅评估第一项

3 个答案: