javascript - 为多个div元素的左边框生成随机颜色

我在这里待了两个小时，但没有找到解决方案。
所以不要说这个问题已经回答了，因为这与为一个元素生成随机颜色有些不同。
无论如何，我的代码的这一部分无法正常工作：

<script>
  function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
  }

  function setRandomBorderColor() {
        var i;
        var contentbox = document.getElementsByClassName(".content-box");
        for (var i=0; i = contentbox.length; i++){
          contentbox[i].css("border-left-color", getRandomColor());
        };
  }
  </script>

如果有人可以帮助我，我将非常感激！

最佳答案

您已用jquery标记了此问题，但似乎主要使用的是纯JavaScript。我在下面提供了一个jquery解决方案（在代码方面更短一些），但如果需要的话，还提供了一个有效的javascript解决方案。目前，您正在将jQuery选择器和样式命令与javascript选定的元素结合在一起（这将不起作用！）。



jQuery解决方案

下面的代码按您的意愿进行操作，它使用jquery遍历类.content-box的每个div，并使用生成器分配随机颜色。它比下面的纯javascript代码版本简单一些。

// Set initial colours
setRandomBorderColor();


// Change colours if button clicked
$("#changeColor").click(function() {
  setRandomBorderColorPureJS();
});


//  Assign random colours to all .content-box elements
function setRandomBorderColor() {

  $(".content-box").each(function() {

    $(this).css("border-left-color", getRandomColor());

  });

};


// Generate random colour
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

.content-box {
  border: 5px solid black;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  min-width: 30px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="changeColor">Change Colours</button>

<div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
</div>

纯Java脚本

此版本不需要jquery。您犯了一些错误：


document.getElementsByClassName(".content-box");-在类名称之前，该名称不应包含前一个.，因为javascript已经在等待一个类名称，您在此处使用jquery表示法，其中jquery选择器可以采用id，class等。您需要告诉它。
for (var i=0; i = contentbox.length; i++)-您不应在此处使用'='运算符，而应像在颜色生成器中一样使用'

一些警告，在此版本的代码中，我排除了对jquery的任何需要，其中包括以下几行：


contentbox[i].css("border-left-color", getRandomColor())（jquery）-> contentbox[i].style.borderLeftColor = getRandomColor();（纯javascript）
$("#changeColor").click(function() { setRandomBorderColorPureJS();});（jquery）-> document.getElementById("changeColor").addEventListener("click", setRandomBorderColor);（javascript）

// Set initial colours
setRandomBorderColor();


// Change colours if button clicked
document.getElementById("changeColor").addEventListener("click", setRandomBorderColor);


//  Assign random colours to all .content-box elements
function setRandomBorderColor() {
  var contentbox = document.getElementsByClassName("content-box");
  for (var i = 0; i < contentbox.length; i++) {
    contentbox[i].style.borderLeftColor = getRandomColor();
  };
}


// Generate random colour
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

.content-box {
  border: 5px solid black;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  min-width: 30px;
  float: left;
}

<button id="changeColor">Change Colours</button>

<div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
  <div class="content-box"></div>
</div>

关于javascript - 为多个div元素的左边框生成随机颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53898307/