通过输入单词的等级编号为单词着色

时间:2018-10-31 13:06:28

标签: jquery colors textcolor

请问,如何通过使用jQuery输入单词的排名编号来给单词着色?

示例:

<div id="example">
<p class="txt">hello my best friend</p>
<input type="number" id="myNumber">
<button>Color it</button>
</div>

当我输入(2,3)并按下按钮时,“我”和“最佳”一词会变成黄色(#ffbe00)

1 个答案:

答案 0 :(得分:1)

在这里jsfiddle

(function ($) {
   
var SetColor=function(){   
    var str=$(".txt").text().split(' ');
    $(".txt").empty();
    var filter=$("#myNumber").val().replace('(','').replace(')','').split(',');
    for(var i=0;i<str.length;i++){

       for(var j=0;j<filter.length;j++){
        if((i+1)==filter[j]){        
            str[i]="<span style='color: yellow;'>"+str[i]+"<span>";           
            }
       }    
    $(".txt").append(str[i]+" ");
    
    } 
} 

$("#btn").on("click",SetColor);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
<p class="txt">hello my best friend</p>
<input type="text" id="myNumber">
<button id="btn">Color it</button>
</div>