javascript - 如何对图像进行着色并在 javascript 中保留分配给它的值？

Question

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

如果我点击 BMW 或 Toyota Logo ，它会为我使用 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>

或任何其他方式。非常感谢。

Answer 1

您需要为每张图片添加一个事件监听器，以便您可以选择要突出显示的图片。

然后，创建一个特殊的 css 类，为所选图像赋予特殊样式。

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

---

在这里，我们有一个监听器，用于监听 <li> 上的“点击”事件.car_types 中的元素列表。当我们点击图像时，我们会删除所有可能具有 shaded 的元素。类(来自之前的点击)，然后添加 shaded类到我们刚刚点击的那个。

shaded class 只给出 50% 的亮度，而不是 100%。

$(".car_types li").on("click", function(){
  $(".car_types li").each(function() {
    $(this).removeClass("shaded");
  });
  $(this).addClass("shaded");
});

.car_types li {
  display: inline-block;
}
.shaded {
  filter: brightness(50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="car_types">
  <li class="bmw"><img src="http://via.placeholder.com/135x135"></li>
  <li class="audi shaded"><img src="http://via.placeholder.com/135x135"></li>
  <li class="toyota"><img src="http://via.placeholder.com/135x135"></li>
  <li class="benz"><img src="http://via.placeholder.com/135x135"></li>
</ul>

---

如果您希望能够同时为多个 Logo 添加阴影，请尝试以下操作:

$(".car_types li").on("click", function(){
  if($(this).hasClass("shaded")) {
    $(this).removeClass("shaded");
  } else {
    $(this).addClass("shaded");
  }
});

.car_types li {
  display: inline-block;
}
.shaded {
  filter: brightness(50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="car_types">
  <li class="bmw"><img src="http://via.placeholder.com/135x135"></li>
  <li class="audi shaded"><img src="http://via.placeholder.com/135x135"></li>
  <li class="toyota"><img src="http://via.placeholder.com/135x135"></li>
  <li class="benz"><img src="http://via.placeholder.com/135x135"></li>
</ul>