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>

单击时如何更改图像样式

1 个答案: