JavaScript pictureChange() 和旋转

Question

我已经在互联网上搜索了几个小时来解决我的问题，但我仍然找不到解决方案。我是 JS 的新手，所以我很兴奋，但在编写代码时仍然遇到一些问题。 我想做的是，onClick，在旋转图片的同时将图片换成另一张。我有我的效果的第一部分(它只工作一次，然后图像停止旋转)，但我想再次将它旋转 180 度并用第一张图像改变它。 我的想法是做一个有 3 个栏的菜单，就像谷歌的那样，点击时变成“X”，反之亦然。这是脚本的第一部分，

var img = document.querySelector('.navicon');

img.addEventListener('click', onClick, false);

function onClick() {
var deg = 180 ;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
    'style', css  );

}
 function pictureChange()
{
document.getElementById("navicon").src="images/buttons/xbutton.png";

}

这是CSS

.navicon:hover {
opacity:0.7;
}
.navicon {
margin-top: 25px;
margin-left:-75px;
position:relative;
display:block;
left:50%;
width: 45px;
height:45px;
left:500px; 
opacity: 1;
-webkit-transition: -webkit-transform 0.1s ease-out;
} 

这是 HTML

<img src="images/buttons/navicon.png" class="navicon rotation"
    style="border=0;" id="navicon" onclick="pictureChange()">

我想过添加一个新类并调用一个只适用于这个新类的函数，但它似乎不起作用...... 感谢您的帮助

Answer 1

我个人尽量避免在 javascript 中设置 css。更好的方法是使用 javascript 添加和删除类，并让 css 处理实际的转换。在这种情况下，您可以使用这样的 css:

.rotate {
  -webkit-transform: rotate(180deg);
}

并在您的 onClick 函数中包含以下行:

this.classList.toggleClass('rotate')

要来回更改图像源，请创建保存源的变量(或数组)，并在 onClick 函数中更改它们。无需在您的 html 中包含 onclick="pictureChange()"。