多对 div 上的相同随机颜色

Question

所以，我有一个代码，可以在页面加载时生成随机颜色。

$(function() {
        $(".stuff").each(function() {
    var hue = 'rgb('
     + (Math.floor((256)*Math.random()) + 25) + ','
     + (Math.floor((256)*Math.random()) + 25) + ','
     + (Math.floor((256)*Math.random()) + 25) + ')';
    $(this).css("background-color", hue);
    });
});

颜色适用于 div .stuff。此 div .stuff 用作按钮。当我点击 .stuff 时，一个相关的 div 打开，我称之为 .filling.

.filling 在页面加载时不显示。当我点击 .stuff 时， .stuff 和 .filling 都会显示。

我有几个 .stuff，与它们每个 .filling 相关，可以这么说，创建对。

html:

<div id="port1Btn" class="divClick stuff">
 </div>
 <div id="port1" class="filling">
     <img src="img/hyper.png">
   </div>

#port1Btn和#port1是定义每一对的内容，连接到右边的按钮。 divClick 用于在单击 .stuff 时帮助关闭打开的 .filling 的脚本。如果需要，这里是代码：

$('.divClick').bind("click", showFilling);

function showFilling(event) {
  event.preventDefault();
  var amountOfPorts = 999;
  var ports = "";

  for (i=0;i<amountOfPorts;i++) {
    ports += "#port" + (i+1) +",";
  }
  ports = ports.slice(0, -1);

  $(ports).hide();

  var clickDiv = "#" + event.currentTarget.id;
  var targetDiv = clickDiv.replace('Btn','');

  $(targetDiv).toggle(100);
};

所以，我想要做的是让 .stuff 和 .filling 的每对颜色相同，但同时，每对应该有不同的随机颜色页面加载。

感谢您的阅读，希望不会太长，如果是这样，请在以后的帖子中告诉我。

Answer 1

您可以使用next()函数。

$(function() {
        $(".stuff").each(function() {
    var hue = 'rgb('
     + (Math.floor((256)*Math.random()) + 25) + ','
     + (Math.floor((256)*Math.random()) + 25) + ','
     + (Math.floor((256)*Math.random()) + 25) + ')';
    $(this).css("background-color", hue);
    $(this).next(".filling").css("background-color",hue);
    });
});

添加该行会将 DOM 中的下一个 div 设置为与 '.filling' class 相同的颜色。

多对 div 上的相同随机颜色

Same random color on multiple pair of divs

html

javascript

css

jquery

background-color