Question

在AMP上点击按钮是否可以显示一张图像并隐藏多张图像？

例如，我有4个按钮（button1，button2，button3和button4），并有4个图像（img1，img2，img3，img4）。我想做类似的事情，点击button1并显示img1，点击button2显示img2但隐藏img1等。以简单的方式单击按钮以显示图像和隐藏图像。

我试图这样做，但是我卡在了这样的东西上。但这不能正常工作。

 <button class="button1" on="tap:img1.toggleVisibility">BUTTON1</button>
 <button class="button2" on="tap:img2.toggleVisibility">BUTTON2</button>
 <button class="button3" on="tap:img3.toggleVisibility">BUTTON3</button>
 <button class="button4" on="tap:img4.toggleVisibility">BUTTON4</button>

<div>
    <div id="img1" style=" position: absolute" hidden >
    <amp-img src="img1.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img2" style=" position: absolute" hidden >
    <amp-img src="img2.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img3" style=" position: absolute" hidden >
    <amp-img src="img3.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img4" style=" position: absolute" hidden >
    <amp-img src="img4.jpg"  width="600" height="600"> </amp-img> 
    </div>
 </div>

我对on="tap:AMP.setState({ hide: true })"和on="tap:AMP.setState({ hide: false })"感到厌倦，但它仅适用于两个图像。

Answer 1

很长一段时间没有回答这个问题，我会尽力提供帮助，我希望这个问题仍然相关。如果我理解正确，您只想显示与一次单击的按钮 ID 相关的图像。为简单起见，我不会直接使用图像。相反，我们使用多色 div。解决方案是将隐藏属性绑定到确切的 Id。如果您愿意，可以随意使用以下增强的代码和 css 以及图像：

    .container{
        display: flex;
        margin-left: 100px;
    }
    .box{
        width: 30px;
        height: 30px;
        margin: 25px;
        padding: 5px;
        color: azure;
        font-weight: 900;
    }
    .img1{
        background: red;
    }
    .img2{
        background: green;
    }
    .img3{
        background: blue;
    }
    .img4{
        background: yellow;
    }
  

<button class="button1" on="tap:AMP.setState({id:1})">BUTTON1</button>
<button class="button2" on="tap:AMP.setState({id:2})">BUTTON2</button>
<button class="button3" on="tap:AMP.setState({id:3})">BUTTON3</button>
<button class="button4" on="tap:AMP.setState({id:4})">BUTTON4</button>

<div class="container">



<div id="img 1" class="img1 box" hidden [hidden] = "id == 1 ? false : true" >
        img1
       </div>


   <div id="img 2" class="img2 box" hidden [hidden] = "id == 2 ? false : true" >
    img2
   </div>

   <div id="img 3" class="img3 box" hidden [hidden] = "id == 3 ? false : true">
    img3
   </div>

   <div id="img 4" class="img4 box" hidden [hidden] = "id == 4 ? false : true">
    img4
   </div>
</div>

热烈的问候，五、

显示和隐藏AMP中的点击按钮上的图片

1 个答案: