Question

我想在每个.elements上使用jquery设置不同的颜色，他们的孩子（.element）应该具有相同的颜色，但每个.elements的颜色属性应该是随机的。我该怎么办？

以下是一个例子：https://jsfiddle.net/auscpzy6/6/

HTML

<div class="elements"> <!-- children share the same color -->
  <div class="element">1</div> <!-- exmaple : red -->
  <div class="element">2</div> <!-- exmaple : red -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">3</div> <!-- exmaple : blue -->
  <div class="element">4</div> <!-- exmaple : blue -->
  <div class="element">5</div> <!-- exmaple : blue -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">6</div> <!-- exmaple : yellow -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">7</div> <!-- exmaple : blue -->
  <div class="element">8</div> <!-- exmaple : blue -->
</div>

Javascript：这就是我尝试的但是所有东西都保持相同的颜色。

function eachEl(el){
    var items = ["blue", "red", "yellow"];
    var item = items[Math.floor(Math.random()*items.length)];
    $(el).css({
        "color": item,
    });
}

$(".elements").each(function() {
    eachEl('.element');
});

任何解决方案？

Answer 1

问题是您传递'.element'而不是$(this)，这应该有效：

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this));
});

Answer 2

要实现此目的，您需要遍历.elements，从数组中选择随机颜色，然后在该元素上设置颜色。

您的代码问题出在最后一部分，因为您提供了一个选择器，它检索所有.elements以执行css()调用，而不是迭代中的当前调用。试试这个，并注意在每个循环中使用this来修改每个特定元素：

$(".elements").each(function() {
  var items = ["blue", "red", "yellow"];
  var colour = items[Math.floor(Math.random() * items.length)];
  $(this).css('color', colour);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
</div>

<div class="elements">
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
</div>

<div class="elements">
  <div class="element">6</div>
</div>

<div class="elements">
  <div class="element">7</div>
  <div class="element">8</div>
</div>

Answer 3

您可以在$(this)函数中使用.element而不是eachEl传递，更改为eachEl($(this))

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

Answer 4

您需要传递eachEl(this)而不是eachEl('.element')，然后将el的所有子项的颜色设置为随机选择的颜色;

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).children('.element').css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

Answer 5

而不是eachEl('.element');您需要使用eachEl($(this).find('.element'));。您的代码正在使用类element的元素，但您只需要当前element的子elements。

＆＃13;

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this).find('.element'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

＆＃13;

Answer 6

所提供的所有答案都是正确的，您需要将'.element'替换为this。但我还会更进一步说明如何为每个 element div获取唯一颜色。

解决方案：只需从阵列中移除颜色，因此不再适用。

function eachEl(el) { var items = ["blue", "red", "yellow"]; var item = items[Math.floor(Math.random() * items.length)]; $(el).css({ "color": item, }); items.splice(items.indexOf(item), 1); //remove the color just applied } $(".elements").each(function() { eachEl(this); });

Answer 7

function ChangeColorCtrl($) {
  const colors = ['red', 'yellow', 'blue', 'green'];
  
  return $('.elements')
    .each((i, group) => {
      const background = colors[Math.floor(Math.random() * colors.length)];
      
      return $(group)
        .each((j, child) => $(child).css({background}))
      ;
    })
  ;
}

jQuery(document).ready(ChangeColorCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="elements"> <!-- children share the same color -->
  <div class="element">1</div> <!-- exmaple : red -->
  <div class="element">2</div> <!-- exmaple : red -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">3</div> <!-- exmaple : blue -->
  <div class="element">4</div> <!-- exmaple : blue -->
  <div class="element">5</div> <!-- exmaple : blue -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">6</div> <!-- exmaple : yellow -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">7</div> <!-- exmaple : blue -->
  <div class="element">8</div> <!-- exmaple : blue -->
</div>

如何为循环遍历数组的每组元素设置随机颜色？

7 个答案: