Question

不完全确定我在这里做错了什么但由于某种原因我不能让这个jQuery框中列出的.click（）事件起作用。因为这是我第一次使用jQuery的尝试，我假设它可能是一个小的细微差别，我没有考虑到或我已经看过的细节。对此的任何帮助将不胜感激。

<html>
  <style>
    #thumbs { padding-top: 10px; overflow: hidden; }

    #thumbs img, #largeImage {
      border: 1px solid gray;
      padding: 4px;
      background-color: white;
      cursor: pointer;
    }

    .thumbnail {
      float: left;
      margin-right: 6px;
      height: 60%;
      width: 60%;
    }

    #description {
      background: black;
      color: white;
      position: absolute;
      bottom: 0;
      padding: 10px 20px;
      width: 525px;
      margin: 5px;
    }

    #panel { position: relative; }

  </style>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >
      $('.thumbnail').click(function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
        $('#description').html($(this).attr('alt'));
      });
    </script>
  </head>

  <body>
    <div id="gallery">
      <div id="panel">
        <img id="largeImage" src="C:\wamp\www\HoneysProject\Image2.jpg" />
        <div id="description">First image description</div>
      </div>

      <div id="thumbs">
        <img class="thumbnail" src="C:\wamp\www\HoneysProject\Image2.jpg" alt="1st image     description" />
        <img class="thumbnail" src="C:\wamp\www\HoneysProject\Image3.jpg" alt="2nd image description" />
        <img class="thumbnail" src="C:\wamp\www\HoneysProject\Image4.jpg" alt="3rd image description" />
        <img class="thumbnail" src="C:\wamp\www\HoneysProject\Image6.jpg" alt="4th image description" />
      </div>
    </div>
  </body>
</html>

Answer 1

只需将您的代码包装到document.ready事件中，因为您是初学者，我想讲一些关于document.ready事件的内容，实际上此事件中的代码只能在DOM got ready之后调用。这样我们就可以事后manipulate。在准备状态之前操作DOM将导致错误。

试试这个，

$(document).ready(function(){

$('.thumbnail').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
 });

});

阅读本文以获取完整参考：.ready()

Answer 2

试

<html>
<style>
#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
border: 1px solid gray;
padding: 4px;
background-color: white;
cursor: pointer;
}
.thumbnail {
float: left;
margin-right: 6px;
height: 60%;
width: 60%;
}
#description {
background: black;
color: white;
position: absolute;
bottom: 0;
padding: 10px 20px;
width: 525px;
margin: 5px;
}
#panel { position: relative; }

</style>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script>
$(document).ready(function(){
  $('.thumbnail').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
 });
});
</script>
</head>
<body>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="C:\wamp\www\HoneysProject\Image2.jpg" />
<div id="description">First image description</div>
</div>
<div id="thumbs">
<img class="thumbnail" src="C:\wamp\www\HoneysProject\Image2.jpg" alt="1st image     description" />
<img class="thumbnail" src="C:\wamp\www\HoneysProject\Image3.jpg" alt="2nd image description" />
<img class="thumbnail" src="C:\wamp\www\HoneysProject\Image4.jpg" alt="3rd image description" />
<img class="thumbnail" src="C:\wamp\www\HoneysProject\Image6.jpg" alt="4th image description" />
</div>
</div>
</body>
</html>

无法让jQuery事件发挥作用

2 个答案: