如何在javascript中对图像进行着色并保留图像中指定的值？

我想知道如何点击这样的图片

如果我点击宝马或丰田的徽标，它会将我用CSS选择的图标进行着色，然后保留该“值”，并将其保存在javascript变量中，以便以后使用

假设我有这个

<ul class="car_types">
            <li class="bmw"><img src="test/bmw.png"></li>
            <li class="audi"><img src="test/audi.png"></li>
            <li class="toyota"><img src="test/toyota.jpg"></li>
            <li class="benz"><img src="test/benz.jpg">Discover</li>
        </ul>

发现

或者我有

<table>
    <tr>
    <div class="car_types">
        <img id="bmw" src="test/bmw.png">
        <img id="audi" src="test/audi.png">
        <img id="toyota" src="test/toyota.jpg">
        <img id="benz" src="test/benz.jpg">
        </div>
    </tr>
</table>

或者任何其他的方法。

---

非常感谢。

通常，您会在图像中添加一个单击侦听器。然后，此单击侦听器将所选的

类添加到图像中。当图像上有一个选定的

类时，该图像具有应用的样式。然后，这些样式应为图像着色。click listener还设置JavaScript变量，然后您可以使用该变量

下面是一个使用纯JavaScript（无jQuery）的示例：

var selectedCar='no car selected'；
var allCarTypes=document.querySelectorAll（'.car_type'）；
allCarTypes.forEach（函数（项）{
item.addEventListener（'click'，函数（事件）{
var selectedElement=event.target；
移除Allelements（）的Selected类；
selectedElement.classList.add（'selected'）；
selectedCar=selectedElement.id；
});
});
函数removeSelectedClassForAllElements（）{
allCarTypes.forEach（函数（项）{
item.classList.remove（'selected'）；
});
}

.car\u type{
宽度：130px；
高度：130像素；
位置：相对位置；
光标：指针；
}
.车辆类型：后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
显示：块；
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.5）；
过渡：0.3s缓解所有；
不透明度：0；
可见性：隐藏；
}
.车辆类型。所选：之后{
不透明度：1；
可见性：可见
}

选择了哪辆车？

您需要为每个图像添加一个事件侦听器，以便您可以选择应高亮显示的图像

然后，创建一个特殊的css类，为所选图像提供特殊样式

我在下面创建了一个简单的演示：

---

在这里，我们有一个侦听器，它侦听您的

.car\u types

列表中

元素上的“click”事件。当我们点击一个图像时，我们会删除所有可能有
着色
类的元素（从上一次点击中），然后将
着色
类添加到我们刚刚点击的那一个

shaded
类只提供50%的亮度，而不是100%


$（“.car\u types li”）。打开（“单击”，函数（）{
$（“.car_types li”）。每个（函数（）{
$（此）.removeClass（“阴影”）；
});
$（此）.addClass（“阴影”）；
});
.car\u类型li{
显示：内联块；
}
.阴影{
滤光片：亮度（50%）；
}






考虑到您添加了这样的事件侦听器，
在js文件中有一个全局变量，并在单击事件时对其进行修改

var selectedVal; //global variable for value
$(".car_types li").on("click", function(){
  $(".car_types li").each(function() {
    $(this).removeClass("shaded");
  });
  $(this).addClass("shaded");
  selectedVal=$(this).data("val"); //modifying global variable
});

//access selectedVal anywhere

HTML:

这里是纯JS


HTMLCollection.prototype.each=function（cb）{for（var i=0；i
img{
不透明度：.8；
}
.选定{
不透明度：1；
}




发现
您错过了指向示例的链接：）我已经添加了：）
<ul class="car_types">
            <li class="bmw" data-val="bmw"><img src="test/bmw.png"></li>
            <li class="audi" data-val="audi"><img src="test/audi.png"></li>
            <li class="toyota" data-val="toyota"><img src="test/toyota.jpg"></li>
            <li class="benz" data-val="benz"><img src="test/benz.jpg">Discover</li>
        </ul>

.shaded{
    box-shadow:0px 0px 20px black;
}