Question

我正在尝试为每张图片制作一个隐藏其他两张图片的按钮。例如，如果我单击左侧图像的按钮，左侧图像将显示，它将隐藏中间和右侧图片。 HTML需要保持不变，有什么建议吗？

<div id="works">
    <figure data-artist="left">
            <img src="david.jpg" alt>
        <figcaption>left image</figcaption>
    </figure>

    <figure data-artist="middle">
        <img src="david-plaster.jpg" alt>
        <figcaption>middle image</figcaption>
    </figure>

    <figure data-artist="right">
        <img src="florence-cathedral.jpg" alt>
        <figcaption>Right image</figcaption>
    </figure>
</div>

<div id="controls">

</div>

<script>
    var hideShowButton = document.getElementById("hideShowButton");

    hideShowButton.onclick = function() { 
        var allImages = { left: "left", center: "middle", right: "right" };

        if(document.getElementById("michelangelo").style.visibility == 'visible') {
            for (var image in allImages) {
                document.getElementById(allImages[image]).style.visibility = 'hidden'; 
            }
            document.getElementById("hideShowButton").innerHTML = "Hide";
        }
    }
</script>

Answer 1

单击div controls内的按钮时，执行函数showImage()。
此函数获取所有图形元素并将显示设置为无。

然后我们得到触发函数的元素的属性data-artist，与图形相同，并在具有相同属性data-artist的图形上添加显示样式作为块元素。

function showImage(event){
  var objClass = event.getAttribute("data-artist");
  var elems = document.getElementsByTagName("figure");
  for (var i=0;i<elems.length;i++)
    elems[i].style.display = 'none';
  
  var element = document.querySelector('figure[data-artist='+objClass+']');
  element.style.display = 'block';
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>
<div id="works">
<figure data-artist="left">
    <img src="david.jpg" alt>
    <figcaption>left image</figcaption>
</figure>

<figure data-artist="middle">
    <img src="david-plaster.jpg" alt>
    <figcaption>middle image</figcaption>
</figure>

<figure data-artist="right">
    <img src="florence-cathedral.jpg" alt>
    <figcaption>Right image</figcaption>
</figure>
</div>

<div id="controls">
  <button data-artist="left" onclick="showImage(this);">left</button>
  <button data-artist="middle" onclick="showImage(this);">center</button>
  <button data-artist="right" onclick="showImage(this);">right</button>
</div>
</body>
</html>

Answer 2

<div id="works">
<figure data-artist="left">
<img src="david.jpg" id="image1" alt>
<figcaption>left image</figcaption>
<button onclick="hideshow('1');">Choose</button>
</figure>

<figure data-artist="middle">
<img src="david-plaster.jpg" id="image2" alt>
<figcaption>middle image</figcaption>
<button onclick="hideshow('2');">Choose</button>
</figure>

<figure data-artist="right">
<img src="florence-cathedral.jpg" id="image3" alt>
<figcaption>Right image</figcaption>
 <button onclick="hideshow('3');">Choose</button>
</figure>
</div>

<div id="controls">

</div>
<script>

function hideshow(buttonpressed) {
      var img1 = document.getElementById("image1");
      var img2 = document.getElementById("image2");
      var img3 = document.getElementById("image3");

     if(buttonpressed==1) {
            img1.style.visibility == 'visible';
            img2.style.visibility == 'hidden';
            img3.style.visibility == 'hidden';
      }

     if(buttonpressed==2) {
            img1.style.visibility == 'hidden';
            img2.style.visibility == 'visible';
            img3.style.visibility == 'hidden';
     }


     if(buttonpressed==3) {
            img1.style.visibility == 'hidden';
            img2.style.visibility == 'hidden';
            img3.style.visibility == 'visible';
     }

}

</script>

如果有许多按钮（不是3），则方法与此不同

希望这有帮助

隐藏/显示按钮

2 个答案: