如何在html / jquery中着色字符串/单词

I am trying to colorize a string/word in HTML. I found a response here - but I am having trouble understanding how to convert to use the function more than once..

我试图在HTML中着色字符串/单词。我在这里找到了一个回复 - 但是我无法理解如何转换为多次使用该函数。

http://jsfiddle.net/8VDm4/

<div id="arch" style="font-size: 40px">First Word work fine</div>
<div id="arch" style="font-size: 40px">Second time - does not work</div>



var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
idx;

$(function() {
var div = $('#arch'); 
var chars = div.text().split('');
div.html('');     
for(var i=0; i<chars.length; i++) {
    idx = Math.floor(Math.random() * colours.length);
    var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
    div.append(span);
}
});

How to create a function that I can call multiple times in a HTML?

如何创建一个我可以在HTML中多次调用的函数?

3 个解决方案

#1

You can only have one element with a particular id. Replace your id with class (or add a particular class to elements) like follows

您只能拥有一个具有特定ID的元素。用class替换你的id(或者将特定的类添加到元素中),如下所示

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div>

javascript

//code has been update in response of observation made by adeneo, thanks adeneo

var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"],
    idx;

$(function () {
    $('.arch').each(function () {
        var div = $(this),
            chars = div.text().split(''),
            span = '';

        div.html('');
        for (var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            span = span + $('<div>').append($('<span>' + chars[i] + '</span>').css('color', colours[idx])).html();
        }
        div.append(span);
    });
});

I've added some code to avoid frequent update of DOM

我添加了一些代码以避免频繁更新DOM

#2

Change the id's on your div's to classes -

将div上的id更改为类 -

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div>

And then change your selector in your jQuery -

然后在jQuery中更改选择器 -

var div = $('.arch');

http://jsfiddle.net/8VDm4/2/

#3

As Ejay has mentioned, it doesn't work because you used ID's. You can only use an ID once on a page. What you want to use are classes.

正如Ejay所提到的,它不起作用,因为你使用了ID。您只能在页面上使用一次ID。你想要使用的是类。

Markup:

<div class="arch">You content</div>

Javascript:

var div = $('.arch');

I've also updated the JSFiddle: http://jsfiddle.net/8VDm4/1/

我还更新了JSFiddle:http://jsfiddle.net/8VDm4/1/

#1