Как раскрасить строку / слово в HTML / JQuery

0

Я пытаюсь раскрасить строку/слово в 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);
}
});

Как создать функцию, которую я могу вызвать несколько раз в HTML?

  • 2
    вы можете иметь только один элемент с определенным идентификатором
Теги:

3 ответа

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

Поделиться
  • 0
    Это, безусловно, не может работать, div.text() и div.html() будет работать на обоих элементах одновременно?
  • 0
    Я попытался внести минимальные изменения в код (замените id на класс), и это сработало (в Firefox. Проверка в других браузерах)
Показать ещё 9 комментариев
0

Измените идентификатор на своем div на классы -

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

Поделиться
0

Как отметил Ejay, это не работает, потому что вы использовали идентификаторы. Вы можете использовать идентификатор только один раз на странице. То, что вы хотите использовать, - это классы.

Разметка:

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

Javascript:

var div = $('.arch');

Я также обновил JSFiddle: http://jsfiddle.net/8VDm4/1/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню