在JavaScript中隐藏照片并替换另一张照片

我有一个关于JavaScript的问题：当用户单击跳转按钮时，文本框打开，按钮的方向改变并旋转

我想我应该用两张照片。当我单击跳转按钮时，第一张照片隐藏，另一张照片替换，但我不知道如何在JavaScript中做到这一点（用于

imageButton2

的CSS代码不起作用）。这是我的密码：

$（函数（）{
$（“#向下跳转”）。单击（函数（）{
$（“#包装”）.slideToggle（“慢”）；
})
})
var show1=真；
$（“#向下跳转”）。单击（函数（事件）{
document.getElementById（'jump_down'）。style.visibility=show1？'visible'：'hidden'；
document.getElementById（'ImageButton2'）。style.visibility=show1？'hidden'：'visible'；
show1=！show1；
})

#跳下{
位置：相对位置；
显示：内联块；
宽度：100%；
背景色：rgba（150190250,0.7）；
填充：20px0；
}
#跳下img{
宽度：3%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#包装纸{
背景色：rgba（164231246,0.8）；
溢出：隐藏；
}
#图像按钮2 img{
宽度：3%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

Hellow

您可以使用纯CSS解决方案进行图像旋转

一旦

#jump#u down

div具有类

。open

#jump_down.open img{
 transform:  translate(-50%,-50%) rotate(180deg);
}

要切换

.open

类，请在单击

时应用
jQuery-toggleClass（'open'）


$（函数（）{
$（“#向下跳转”）。单击（函数（）{
$（此）.toggleClass（“打开”）；
$（“#包装”）.slideToggle（“慢”）；
})
})
#跳下{
位置：相对位置；
显示：内联块；
宽度：100%；
背景色：rgba（150190250,0.7）；
填充：20px0；
}
#跳下img{
宽度：3%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#跳下，打开img{
变换：平移（-50%，-50%）旋转（180度）；
}
#包装纸{
背景色：rgba（164231246,0.8）；
溢出：隐藏；
}


Hellow

为什么不在没有任何其他图标和替换的情况下对该图标使用CSS旋转？你可以检查这个！