通过javascript点击不同的图像时隐藏li的元素

Question

我在li中显示了一些文本，并在上面设置了一个图像(有2张图像，单击其中时会逐个显示。

我想在单击一张图像时隐藏 li(其类为"one_answers"(的文本，并在单击另一张图像(单击第一张图像后出现(时显示内容。

这些是我的代码：

<div class="btn">
<div class="showhide" id="showhide"><img id="showhideimg"></div></div>
<ul>
<li>Lorem ipsum dolor sit amet?</li>
<li class="one_answers">Hi there!</li>
<li>Lorem, ipsum?</li>
<li class="one_answers">Lorem ipsum dolor sit amet.</li>
</ul>

我已经制作了javascript，以便在单击图像时一个接一个地显示图像，但是当我单击特定图像时禁用li元素时会暂停：(。

<script>
var img = 0;
var images = [ 'eye.png', 'eyeslash.png'];
var showHide = document.getElementById('showhide');
var showHideImg = document.getElementById('showhideimg');
showHide.addEventListener('click', function (e) {
setImage();
});
function setImage() {
if (img > images.length - 1) {
img = 0;
}
showHideImg.src = images[img++];
}
setImage();
</script>

Answer 1

只需按类名循环访问，然后显示和隐藏。

var img = 0;
var images = [ 'https://i.imgur.com/KfehB6D.png', 'https://svgshare.com/i/Gzk.svg' ];
var showHide = document.getElementById('showhide');
var showHideImg = document.getElementById('showhideimg');
showHide.addEventListener('click', function (e) {
setImage();

});
function setImage() {
if (img > images.length - 1) {
img = 0;
}
var ans = document.getElementsByClassName("one_answers");
for(var i = 0; i < ans.length; i++){
ans[i].style.display = (img==0 ? "list-item": "none");
}

showHideImg.src = images[img++];
}
setImage();

#showhideimg{
width: 20px;
}

<div class="btn">
<div class="showhide" id="showhide"><img id="showhideimg"></div></div>
<ul>
<li>Lorem ipsum dolor sit amet?</li>
<li class="one_answers">Hi there!</li>
<li>Lorem, ipsum?</li>
<li class="one_answers">Lorem ipsum dolor sit amet.</li>
</ul>