Question

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

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

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

Answer 1

您只能拥有一个具有特定id的元素。将id替换为class（或将特定类添加到元素中），如下所示

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

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

Answer 2

将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>

然后在jQuery中更改你的选择器 -

var div = $('.arch');

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

Answer 3

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

标记：

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

使用Javascript：

var div = $('.arch');

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

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

3 个答案: