单击时如何更改图像样式

Question

我正在为一个新网站设置一个测验，根据他们选择的选项保存用户偏好。想法是'测验'显示许多图像，可以通过点击它们来选择。一旦被选中，它们就会变成“灰色”，我计划通过改变图像的不透明度来实现。

不幸的是，我对网络编码的了解非常有限，我无法弄清楚如何在点击图像时改变图像的样式。

我的出发点基本上是这样的：

<a href="https://manilva.club/1103-2/?frame-nonce=64ca5428e3">
    <img src="https://manilva.club/wp-content/uploads/2019/04/Akielo-Metal-2.jpg" />
</a>

如果我的理解是正确的，我需要添加一些在单击时会改变图像的java。

Answer 1

好的，首先，你需要使用Javacsript为你的img元素添加一个类，我创建了一个片段，当你点击包含图像的锚点时，图像会改变它的不透明度，如果你再次点击它会回来正常。注意函数addClassToImage。

我还为图像的不透明度添加了过渡效果，请注意下面的CSS部分。

这是片段：

function addClassToImage(element) {
	var innerImage = element.querySelector('img');
  if(innerImage) {
  	if(innerImage.classList.contains('clicked')) {
    innerImage.classList.remove('clicked');
    }
    else {
  		innerImage.classList.add('clicked');
    }
  }
}

.img-class {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.clicked {
  opacity: 0.5;
}

<a href="javascript:;" onclick="addClassToImage(this)">
    <img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/Akielo-Metal-2.jpg" />
</a>

<a href="javascript:;" onclick="addClassToImage(this)">
    <img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/Akielo-Metal-2.jpg" />
</a>

<a href="javascript:;" onclick="addClassToImage(this)">
    <img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/Akielo-Metal-2.jpg" />
</a>