如果div具有特定的背景颜色，请更改图标

时间：2018-03-24 00:37:18

标签： javascript jquery html css image

嗨，我希望你能帮助我，我有一个进度条，其中一些PNG图钉图标必须从活动图像图像更改为非活动图像图像取决于另一个div的颜色这里是我正在做什么，但它似乎没有工作，我学习JavaScript和Jquery所以我不知道我是否做错了。

谢谢：）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <style>
    .quadrant {
      border-radius: 5px;
      border: .5px solid #d8d8d6;
      padding: 10px;
      margin-bottom: 20px;
    }

   .quadrant > p {
      text-align: center;
      font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
      font-size: 20pt;
      color: #ffffff;
      font-weight: 700;
    }

    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    .progress {
      width: 100%;
      height: 25px;
      background-color: #F1F1F1;
      box-shadow: 1px 1px 1px 1px #d8d8d6;
    }

    .bar {
      width: 25%;
      height: 25px;
      background-color: #003E8B;
    }

    .number {
      border-radius: 10px;
      border: 5px solid #ffffff;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      color: #ffffff;
      font-weight: 700;
      text-align: center;
      margin-top: 10px;
      padding-top: 15px;
    }

    .number:hover {
      opacity: 0.8;
    }

    .number > p {
      font-size: 12px;
    }

    .color-pin {
      float: right;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col--xs-12">
        <div class="row">
          <h3>Diagnostico en</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="quadrant" style="background-color: #009BF3;">
              <img src="icons/instutucional.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
              <p>20%</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #007305;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #EA8C1C;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #21AAA0;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <!---<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">--->
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_economico.png" class="color-pin" id="economico">
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_social.png" class="color-pin" id="social">
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_naturaleza.png" class="color-pin" id="naturaleza">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="progress">
              <div class="bar">
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="row">
          <h2>Consejos de Uso</h2>
          <p>Comienza por contestar primero todas las variables y después sube las evidencias conforme las obtengas.</p>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
            <p>1</p>
            <img src="icons/institucional.png" width="50%">
            <p>Desarrollo Institucional para un Buen Gobierno</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #007305; cursor: pointer;">
            <p>2</p>
            <img src="icons/economico.png" width="50%">
            <p>Desarrollo Económico Sostenible</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #EA8C1C; cursor: pointer;">
            <p>3</p>
            <img src="icons/social.png" width="50%">
            <p>Desarrollo Social Incluyente</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #21AAA0; cursor: pointer;">
            <p>4</p>
            <img src="icons/natural.png" width="50%">
            <p>Desartrollo Ambiental Sostenible</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
          crossorigin="anonymous"></script>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
          crossorigin="anonymous"></script>

  <script>
    var color= $"btn-institucional");
        if( color.css('background-color') == "rgb(216,216,214)"){
        document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
      } else {
        document.getElementById("institucional").src = "icons/pin_insitucional.png";
      }
  </script>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

我发现了两个问题：

  • 您忘了将ID institucional添加到img dom。它应该是：

  • document.getElementById（“btn-institucional”）。style.backgroundColor为您提供rgb中的颜色，而不是十六进制。在您的代码中，它返回的值为rgb(216, 216, 214)

您可以使用rgb2hex实用程序函数：

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

source

这是example：

console.log(document.getElementById("btn-institucional").style.backgroundColor); // returns rgb(216, 216, 214)

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

let backgroundColor = rgb2hex(document.getElementById("btn-institucional").style.backgroundColor)

if( backgroundColor == "#d8d8d6") {
	document.getElementById("institucional").src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
}
    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">

            <p>1</p>

            <img id="institucional" src="institucional" src="https://www.w3schools.com/howto/img_fjords.jpg" width= "50%">

            <p>Desarrollo Institucional para un Buen Gobierno</p>   



        </div>

答案 1 :(得分：0)

.style.backgroundColor返回rgb(字符串，而不是#xxxxxx字符串。你必须解析rgb(字符串的数字并将它们变成适当的十六进制字符串，如下所示：

const rgb = document.getElementById("btn-institucional").style.backgroundColor;
const rgbNums = rgb.match(/\((.+)\)/)[1].split(', ');
const rgbHex = rgbNums.map(num => {
  const numStr = Number(num).toString(16);
  if (numStr.length === 1) return '0' + numStr;
  return numStr;
});
const hexStr = '#' + rgbHex.join('');
console.log(hexStr);

if(hexStr == "#d8d8d6"){ 
  console.log('set src');
  document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";     
}
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    <img src="icons/pin_insitucional.png" class="color-pin" id="institucional">
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">     
  <p>1</p>          
  <img src="icons/institucional.png" width= "50%">
  <p>Desarrollo Institucional para un Buen Gobierno</p> 
</div>

答案 2 :(得分：0)

这里有语法错误：var color= $"btn-institucional");。

应该是：var color= $("btn-institucional");。

并且，当你得到background-color CSS属性值时，它会在每个逗号后面带有一个带空格的rgb字符串：

// Notice that there will be spaces after each comma in the result
console.log($("div").css("color")); // rgb(255, 255, 0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>

您可以调整要与之比较的rgb字符串，或者只是提取style属性的值，该值将作为以下内容写入HTML的十六进制值返回：

// This is a bit longer, but shows that you can get the original hex value

// Get the "style" attribute, split its value where the colon is and return the second part of the 
// resulting array.
console.log($("div").attr("style").split(":")[1]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>

相关问题
最新问题