javascript - javascript点击不同图片时隐藏li的元素

Question

我在li中显示了一些文字，并在其上方设置了一张图片(有2张图片，点击其中一张一张显示。)

我想在点击一张图片时隐藏 li(其类别为“ans”)的文本，并在点击另一张图片(点击第一张图片后出现)时显示内容。

这些是我的代码:

<div class="btn">
    <div class="showhide" id="showhide"><img id="showhideimg"></div></div>
<ul>
      <li>Lorem ipsum dolor sit amet?</li>
      <li class="ans">Hi there!</li>
      <li>Lorem, ipsum?</li>
      <li class="ans">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("ans");
  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="ans">Hi there!</li>
      <li>Lorem, ipsum?</li>
      <li class="ans">Lorem ipsum dolor sit amet.</li>
    </ul>