嗨，我希望你能帮助我，我有一个进度条，其中一些 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>
我发现的两个问题：
您忘记将 id 添加institucional到您的imgdom 中。它应该是：
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]);
}
这是一个例子：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句