Question

下面是一个供参考的jsfiddle文件。

我试图这样做，以便当您按下按钮（1,2,3,4）时，相关的图像在单击时显示，并且在单击更多数字时与图像重叠。我试过----

$('#showButton').click(function() {
    $('#img3').show();
    return false;
});

但是它不起作用。

单击此按钮时是否有办法显示＃img1 然后单击另一个按钮＃img2与该图像重叠

非常感谢您！

HTML

<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<!-- ////images -->
<img src="line-01.png" id='img1'>
<img src="line-02.png" id='img2'>
<img src="line-03.png" id='img3'>
<img src="line-04.png" id='img4'>
<img src="line-05.png" id='img5'>
<img src="line-06.png" id='img6'>
<img src="line-07.png" id='img7'>
<img src="line-08.png" id='img8'>
<img src="line-09.png" id='img9'>

css

img {/*    display:none;*/
position:absolute;
width:200px;}

Answer 1

您可以在按钮单击时传递与该按钮对应的图片图片编号：

<button onclick="picture(1)">1</button>
<button onclick="picture(2)">2</button>
<button onclick="picture(3)">3</button>

然后执行功能：

function picture(n) {
  $("#img"+n).show();
}

这是解决此问题的幼稚方法，但对您有用。还有很多其他方法可以解决此问题，但是我认为这对JS新手来说是一个好的开始。当您单击另一按钮后已经单击的按钮时，这也可能会导致更多错误，但是我认为您可以解决！

单击显示图像时

1 个答案: