我如何为每个单词分配单词和分配css颜色？

我想在javascript或jquery中分割单词，并为“听到（蓝色）”和“我们（黑色）”添加分配css颜色。

下面是检查元素，因为我没有文件工作，所以我想与类名和ID与检查元素的工作。

对于如： -

$va = $("#section-56 .mid-content h1 span").text().split(""); 

alert($va);

而如何我给你“听到文字为蓝色和我们的文本作为黑”？

（上面的代码警报不工作，我不知道这是否正确）。

像这样我必须得到字符串和拆分。

来源

2017-04-04 Logeshwaran

不知道这是否正确的代码或不是，但你是拆分在一个空的字符串空间。试试.split（''）代替 –

你可以发布HTML的[mcve]吗？（不是后端代码...） – evolutionxbox

你能给跨度一个ID？为什么你想用JavaScript做到这一点？这是一个静态文本？然后直接编辑css。或者你想动态改变颜色？ – Lightningbear

您应该按space字符分割。

变化

$va = $("#section-56 .mid-content h1 span").text().split("");

要

$va = $("#section-56 .mid-content h1 span").text().split(" ");

来源

2017-04-04 10:24:38 Mamun

如果这是答案，那么该问题应该作为题外话题来结束 - “关于由简单的印刷错误引起的问题的问题”。 – evolutionxbox

是的，因为这种问题除了OP以外没有任何帮助。现在OP有解决方案，这个问题对其他人来说帮助不大。当然，除非这不是解决问题的办法。 – evolutionxbox

这个问题刚刚被编辑，包括'如何分配'听到文字为蓝色，我们的文字为黑色'？我个人认为这应该是一个单独的问题。 –

试试下面这段代码

$(function(){ 
 

 
$va = $("#section-56 .mid-content h1 span").text().split(" "); 
 

 
    $va[0] = '<span style="color:blue;">'+ $va[0] +'</span>'; 
 
    $va[1] = '<span style="color:black;">'+ $va[1] +'</span>'; 
 

 
    $("#section-56 .mid-content h1 span").html($va[0] + " "+ $va[1]); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<section id="section-56"> 
 
<div class="mid-content"> 
 
<h1> 
 
<span>Hear Us</span> 
 
</h1> 
 
</div> 
 
</section>

来源

2017-04-04 10:31:45

我试过但没有工作。我试图提醒$ va。但我甚至没有警觉。 – Logeshwaran

查看小提琴：https：//jsfiddle.net/1Lh3mhrn/ –

检查，如果它帮助你。同时使用 “而不是空间（“）

$va = $("#section-56 .mid-content h1 span").text().split(" ");

隔板作为空字符串（”）”得到这两个词作为后

$va = $("span").text().split(" "); 
 
$("span").html("<span class='blue'>"+$va[0] + "</span> <span class='red'>" + $va[1]);

.red{color:red;} 
 
.blue{color:blue}

<!DOCTYPE html> 
 

 
<html> 
 

 
    <head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <span>Hear Us</span> 
 
    </body> 
 
    </html>

来源

2017-04-04 10:32:27

第一个问题是使用上面的JavaScript代码的数组。您需要用两种不同的跨度构建h1标签的新内容。

var newContent = '<span class="color-blue">'+$va[0]+'</span>'+' <span class="color-black">'+$va[1]+'</span>'; 

$("#section-56 .mid-content h1").html(newContent);

最后，你需要改变的CSS样式两个词

#section-56 .mid-content h1 .color-blue{color: blue;} 

#section-56 .mid-content h1 .color-blue{color: black;}

或者你也可以简单地添加的CSS的span标签中的属性

$va = $("#section-56 .mid-content h1 span").text().split(" "); 
var newContent = '<span style="color: blue;">'+$va[0]+'</span>'+'<span style="color: black;">'+$va[1]+'</span>'; 

$("#section-56 .mid-content h1").html(newContent);

来源

2017-04-04 10:36:08 Ali

你应该拆分space()。因此，代码应该是这样的：

$(function(){ 
 
    var a = $('span').text().split(" "); 
 
    alert(a); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>Hear Us</span>

它返回一个数组，你可以访问a[0] =听取和a[1] =我们

来源

2017-04-04 10:44:27

这可能不是一个确切的解决方案（超过什么你真的需要），但是我过去做了一些事情来以不同的方式/随机地设计每个单词。 http://codepen.io/Webpandit/pen/YXdXrg。

您可以从这里开始并将其更改为符合您的要求。应该是一个不错的任务，为您

var pText = $('.text'); 
 
var words = pText.text().split(' '); 
 
pText.text(''); 
 

 
for(var i=0; i<words.length; i++) { 
 
    pText.append('<span class="textColor">' +words[i] + ' </span>'); 
 
} 
 
var textColor = $('.textColor'); 
 

 
// arrays with property values 
 
var colors = ['#000000', '#E843E2', '#666666', '#ff0000', '#00dd00', '#0063FF']; 
 
var fontFamily = ['arial', 'helvetica', 'verdana', 'sans-serif']; 
 
var fontStyle = ['italic', 'normal']; 
 

 
// function to get a random Styles from the object passed in the function 
 
var randomStyles = function(obj) { 
 
    return obj[Math.floor(Math.random() * obj.length)]; 
 
} 
 

 
// applying random styles to each word/span element 
 
textColor.each(function(){ 
 
    $(this).css('color', randomStyles(colors)); 
 
    $(this).css('font-family', randomStyles(fontFamily)); 
 
    $(this).css('font-style', randomStyles(fontStyle)); 
 
});

.text { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="text">Hello there this is a lorem ipsum text with random styles</div>

编辑：您修改您的要求这个剧本之后，这可以很容易地在情况下，如果你的标题文字修改扩展到更多的话为好。后来我才可以张贴的答案，如果你还没有得到它的工作

var pText = $('.text'); 
 
var words = pText.text().split(' '); 
 
pText.text(''); 
 

 
for(var i=0; i<words.length; i++) { 
 
    pText.append('<span class="textColor">' +words[i] + ' </span>'); 
 
} 
 

 
var textColor = $('.textColor'); 
 

 
// array with defined colors 
 
var definedColors = ['blue', 'black', 'red', 'orange', 'green', 'purple', 'brown', 'pink', 'grey', 'blue', 'black']; 
 

 
// applying defined colors to each word/span element 
 
textColor.each(function(index){ 
 
    $(this).css('color', definedColors[index]); 
 
});

.text { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="text">Styling three words</div>

UPDATE：这第二个片段现在正是回答您的问题时，“definedColors”阵列应该ATLEAST具有相同长度（或更多）作为你正在设计的单词的数量。这将颜色应用于每个单词的顺序，他们在数组&不是随机的，因为前面的片段

来源

2017-04-04 10:45:22 Webpandit

我如何为每个单词分配单词和分配css颜色？

回答

相关问题