JQuery解决方案

Question

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

<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>

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

Answer 1

您已使用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>

纯Javascript

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

document.getElementsByClassName(".content-box");-在类名之前应该不前面有.，因为javascript已经在等待类名了，您在这里使用jquery表示法，其中的jquery选择器可以使用id，class等，因此您需要告诉它哪个。
for (var i=0; i = contentbox.length; i++)-您不应在此处使用'='运算符，而应像在颜色生成器中一样使用'<'。如果使用'='，则尝试对不存在的DOM元素执行操作，并且代码失败。

一些警告，在此版本的代码中，我排除了对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>

Answer 2

您的代码中几乎没有错误。

document.getElementsByClassName()仅接受类名作为参数，不带点。因此应该是document.getElementsByClassName('content-box')。
在for循环条件下，您必须写i < contentbox.length而不是i = contentbox.length。查看文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for。
您不能在本机DOM元素上调用css()函数（从document.getElementsByClassName()函数获得）。要更改本机DOM元素的CSS属性，应使用contentbox[i].style.borderLeftColor = getRandomColor()（see docs）。如果要使用.css()，则应使用jQuery。
您两次声明i变量（在循环之前和循环条件内部）。它不会引起任何错误，但是您不需要这样做。

因此您的代码应如下所示：

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 contentbox = document.getElementsByClassName("content-box");

  for (var i = 0; i < contentbox.length; i++) {
    contentbox[i].style.borderLeftColor = getRandomColor();
  }
}

要使代码真正起作用，请不要忘记在文档DOM准备就绪后调用setRandomBorderColor()，并为元素设置一些border-left-width和border-left-style。如果仅设置边框颜色，则不会看到任何边框。

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

2 个答案:

JQuery解决方案

纯Javascript