Javascript Jquery函数显示不工作

My script.js

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>

我的html主页

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>

---

问题是显示功能不起作用。我已经尝试了w3schools.com中给出的所有可能性，但它仍然不起作用。

ID应该是唯一的，不能有两个具有相同ID的元素：

<input type="button" value="2" id="btn"/>
<input type="button" value="3" id="btn"/>

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>

使用类而不是id

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>

---

这里有一个JSBin显示了一个工作示例，我隐藏了一个元素而不是显示它，它是h1而不是img，但原理是一样的：

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>

---

JavaScript第四行中有语法错误，应该是}；而不是}}；您还必须使用具有相同ID的按钮btn。

两个按钮ID重复，尝试修改一个ID应是唯一的，请使用class代替。您是否在页面中包含jQuery您的浏览器控制台的任何错误消息下面的答案指出一个元素的ID在页面中必须是唯一的。。。。但是如果你点击了第一个元素，这个元素的id是bt，在这个例子中，按钮的值是2，它应该可以工作，如果你有相同的两个按钮，那么就用class代替id，btn.我希望两个按钮在单击时显示相同的图像，这就是为什么两个按钮具有相同的id。如果要描述一组具有相同属性\行为的元素，请使用类而不是id的suse类。规则ID应该是唯一的是强制的，即使在将ID更改为类之后问题仍然存在您是否已将$'btn'更改为$'.btn'？ID=btn1的原因是什么@eicto OP使用了id=btn1，因此我认为他可能出于某种目的使用它：DI已经做了必要的更改，但仍然不起作用

$(document).ready(function(){
  $('.btn').click(function(){
  $('#image_display').show();
  }};
});


<input type="button" value="1" id="btn1"/>
<input type="button" value="2" class="btn"/>
<input type="button" value="3" class="btn"/>
<img src="img/book-cover" border="0" width="900" 
  height="300" alt="image1" target="_self" id="image_display"/>