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

时间：2019-03-07 05:40:51

标签： javascript jquery

我创建了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>

2 个答案:

答案 0 :(得分：1)

  1. 使用类，并在每个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>

答案 1 :(得分：0)

您需要触发任何一个颜色框点击事件onload

对于所有Single 

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

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>

对于所有人 

var cl  = $('div').map(function(){
          var color = $(this).css("background-color");
         return ({before:color,after:rgb2hex(color)});
      }).get();

       $("#rgbresult").html(cl.map(a=> a.before).join(','));
        $('#hexaresult').html(cl.map(a=> a.after).join(','));


$(function() {
  $("div").click(function() {
    var color = $(this).css("background-color");
    $("#rgbresult").html(color);
    var hex = rgb2hex(color);
    $('#hexaresult').html(hex);
  });
   
   var cl  = $('div').map(function(){
      var color = $(this).css("background-color");
     return ({before:color,after:rgb2hex(color)});
  }).get();
  
   $("#rgbresult").html(cl.map(a=> a.before).join(','));
    $('#hexaresult').html(cl.map(a=> a.after).join(','));
});

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>

相关问题
最新问题