Question

我试图通过单个字符着色文本来测试“诱导联觉”。俄语字母表中的每个字符都应该映射到一种颜色，例如А是红色，Б是蓝色等等，所以总共会有33种颜色。这个过程应该是自动的。

我想的方法是将整个文本放在div元素中并在Javascript中获取，然后将每个字符分开并用正确的字母放置<span class="letter">，所以对于单词“ два“最终文本将是这样的：

<div class=text>
    <span class="д">д</span><span class="в">в</span><span class="а">а</a>
</div>

问题是，有更好的和/或更短的方法吗？我认为足够大的文本甚至可以使浏览器崩溃。

Answer 1

这是一种jQuery方法。

第1步：创建一个功能，将文本拆分为手动但现在动态分割。
第二步：给出跨越各自字母的班级。
第3步：为所有字母写css以给出各自的颜色。

这是代码：

HTML：

<div class="text">Test Message</div>

jQuery：

$.fn.texter = function() {
    var letters = $(this).html().split(""),
        text = "";

    for (var i in letters) {
        text += "<span class='"+letters[i]+"'>"+letters[i]+"</span>";
    }

    $(this).html(text);
};

$(document).ready(function() {
    $(".text").texter();
});

CSS：

.a {color: red;}
.b {color: green;}
.c {color: blue;}
.d {color: yellow;}
.e {color: magenta;}

这是一个小提琴：http://jsfiddle.net/3d4j5cdq/

Answer 2

虽然您可以轻松地用HTML中的跨度包装每个字母，但如果您有许多字母，则以下解决方案将有所帮助，否则如果您想节省时间，请在控制台中运行此功能以立即将跨度包装到每个字母一个班级名称。

function addClassToLetters(element) {
    // runs if the passed element has no children elements in it.
    if (!element.children.length) {
        return element.innerHTML.replace(/(.)/g, function (x) {
            return "<span class='" + x + "'>" + x + "</span>";
        });
    }
    else{
        // do something if the element has child elements in it
        // or return the original html
    }
}

CSS和/或Javascript中给定文本中俄语字母的每个字符的颜色不同

2 个答案: