我在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>
最佳答案
只需按类名遍历,然后显示和隐藏。
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>
关于javascript - javascript点击不同图片时隐藏li的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59497914/