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适用于在单击.filling时帮助关闭展开.stuff的脚本。如果需要，以下是代码：

$('.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);
    });
});

添加该行将在＆＃39; .stuff＆＃39;之后设置DOM中的下一个div。使用＆＃39; .filling＆＃39;类到相同的颜色。

多对div上的相同颜色

1 个答案: