javascript - 从 1's and 0' 的字符串中选择随机数并改变颜色

Question

我有一个通过 jQuery 显示的随机字符串 1 和 0。我现在想选择一个随机数并更改它的颜色。使用数组还是 $(div).text() 字符串更好？我可以从其中任何一个中获取数字，但如何将其重新插入到 div 中？

 var numbArray = [];

 for(i=0; i<10; i++)
 {
   var randomNumbers = Math.round(Math.random());
   $('#numbs').prepend(randomNumbers);
   numbArray[i] = randomNumbers;
 }

<div id="numbs">0000110111 </div>

上面的 div 是代码的结果，但是我如何选择一个随机项目，改变它的颜色，并显示在原始输出中？

谢谢，

Answer 1

您可以在某个索引处找到数字，用所需的颜色包裹它并重建字符串并使用 html() 将其设置回 div 并使用 Math.floor( Math.random() * 10) 生成从零到您拥有的字符长度的随机数。

var index = 3;
var originalElementValue;

function colorStringValue(strIndex)
{
  strIndex = parseInt(strIndex);
  
  var character = originalElementValue.charAt(strIndex);
  $("#numbs").html(originalElementValue.substr(0, strIndex) + "<span style='color:red'>" + character + "</span>" +  originalElementValue.substr(strIndex+1));
  
  }



$(document).ready(function(){

  originalElementValue = $("#numbs").text();
  colorStringValue(index);
  
  $("#strIndex").click(function(){
  
       var rand = Math.floor(Math.random() * 10) + 0  ;
    $("#rand").html(rand);
        colorStringValue(rand);
  
  });


});

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

<button id="strIndex" > Generate Random Number </button>
<br />

Random Number : <span id="rand"></span>

<br />

<div id="numbs">0000110111</div>