时间戳

首页 > 解决方案 > 如何使用 jquery 在加载页面上的每个 div 下方显示颜色？

javascript - 如何使用 jquery 在加载页面上的每个 div 下方显示颜色？

问题描述

我已经创建了 4 个 div 并为每个 div 赋予了颜色，现在我希望每个 div 下方显示每个的颜色，我为每个 div 设置了十六进制值，但它仅在我单击它时显示，我想要每个 div 下方的每个 div 的颜色在加载页面时。请帮忙。

请仅使用 jquery 帮助我解决问题。

$(function() {
  $("div").click(function() {
    var color = $(this).css("background-color");
    $("#rgbresult").html(color);
    var hex = rgb2hex(color);
    $('#hexaresult').html(hex);
  });
});

function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : orig;
}
#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>

<div id="second" style="position: relative;">
</div>

<div id="third" style="position: relative;">
</div>

<div id="fourth" style="position: relative;">
</div>

<p id="rgbresult"> </p>
<p id="hexaresult"> </p>

标签： javascriptjquery

解决方案

  1. 使用 class 并将每个结果 div 放在每个 div 旁边，然后使用 .next() 将相应的 div 结果指向此上下文

$("div").click(function() {
  var color = $(this).css("background-color");
  $(this).next(".rgbresult").html(color);
  var hex = rgb2hex(color);
  $(this).next().next(".hexaresult").html(hex);
});

$("div").each(function() {
  var color = $(this).css("background-color");
  $(this).next(".rgbresult").html(color);
  var hex = rgb2hex(color);
  $(this).next().next(".hexaresult").html(hex);
})




function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : orig;
}
#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="second" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="third" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="fourth" style="position: relative;">
</div>

<p class="rgbresult"> </p>
<p class="hexaresult"> </p>

推荐阅读