Question

Hello Stackoverflow系列：）

我需要一个简单的jQuery脚本，但因为我是jQuery的初学者..然后我无法自己解决这个问题:(并且还没有这样的脚本或者我只是不知道正确的搜索词。

想法非常简单。我的设计师用两种颜色设计h1标签。例如：“为什么要使用mysite.com？”然后[mysite.com？]有不同的颜色。我可以看到技术解决方案由$（“h1.title”）触发，脚本将计算有多少单词。然后除以2并制作一半不同颜色，并在其周围附加容器。

如何实现这一目标？

卡勒

Answer 1

如果您真的想使用JavaScript来执行此操作，请参阅this fiddle以获取以不同方式为元素文本的后半部分着色的方法示例。

它通过在空格上分割原始字符串，确定中间点，然后在下半部分周围用span（使用您喜欢的任何样式）重建字符串来实现：

$("h1").each(function() {
    var t = $(this).text();
    var splitT = t.split(" ");
    var halfIndex = Math.round(splitT.length / 2);
    var newText = "";
    for(var i = 0; i < splitT.length; i++) {
        if(i == halfIndex) {
            newText += "<span style='color:#ff0000'>";
        }
        newText += splitT[i] + " ";
    }
    newText += "</span>";
    $(this).html(newText);
});

我确信有更快的方法可以做到这一点，但这是我想到的第一件事。

Answer 2

我在寻找一种方法将一大块html分成两部分时找到了这个帖子，并且认为我会发布我的解决方案。

我使用正则表达式返回所有顶级html元素;这个正则表达式“跳过”嵌套元素，因为它们被匹配为顶级元素的中间部分。

这是一个简单的划分，圆形和切片。

var result = str.match(/<(\w[\w\d]*)[^>]*>.*?<\/\1>/g);
var mid = Math.ceil(result.length / 2);
var part1 = result.slice(0,mid);
var part2 = result.slice(mid);

......或者如果你喜欢3个部分

var gap = Math.ceil(result.length / 3);
var part1 = result.slice(0,gap);
var part2 = result.slice(gap, gap*2);
var part3 = result.slice(gap*2);

Answer 3

<h1>
    <span style="header-color1">Why use </span> 
    <span style="header-color1">mysite.com?</span>
<h1>

然后相应地设置header-color1和header-color2范围的样式。这看起来很奇怪，有一个2种不同颜色的标题...不是很好的设计imo但也许你的设计师有一个好主意，不确定。

这在jQuery中不会太难，但我认为这是overuse的情况。

Answer 4

你可以尝试这样的事情：

//split h1 content by spaces


function color_header(str) {
    var words = str.split(' ');
    var words_num = words.length;

    if (words_num > 1) {
        var first_color_words = Math.floor(words_num / 2);
    } else {
        return str;
    }

    str = '<span class="color-1">';
    for (var i = 0; i < words_num; i += 1) {
        str += words[i];
        if (i === first_color_words - 1) {
            str += '</span><span class="color-2">';
        }
        if (i !== (words_num - 1)) {
            str += ' ';
        }
    }
    str += '</span>';
    return str;
}

函数接收带有title的字符串，并返回像<span class="color-1">part 1</span><span class="color-2"> part 2</span>这样的html字符串。如果标题中只有1个单词 - 返回初始字符串

jQuery：如何将文本字符串分成两半，使一半用不同的颜色？

4 个答案: