隐藏/显示按钮-Java 学习之路

-1

我试图为每张图片制作一个隐藏其他两张图片的按钮 . 例如，如果我单击左侧图像的按钮，左侧图像将显示，它将隐藏中间和右侧图片 . 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>

2 回答

单击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>

回复于 2024-05-02T16:48:13+08:00

-1

<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），方法将与此不同

希望这可以帮助

回复于 2024-05-02T16:48:13+08:00

隐藏/显示按钮

2 回答

相关问题