Question

我很难在点击.cake时出现此警报。

 <ul class="block-container shorthand">
    <li class="block"><img class="cake" src="http://i.imgur.com/MMRz8fe.gif"></li>
    <li class="block"><img class="cake" src="http://i.imgur.com/vkpuOZ5.png"></li>
    <li class="block"><img class="cake" src="http://i.imgur.com/mD8T7FM.png"></li>
    <li class="block"><img class="turkey" src="http://i.imgur.com/Sxj6zq8.png" onmouseover="this.src='http://i.imgur.com/X5l9hAs.png'" onmouseout="this.src='http://i.imgur.com/Sxj6zq8.png'" /></a></li>
</ul>

     .block-container {
  padding: 60px 70px 70px 70px;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shorthand { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.block {
  background: #d31c1c;
  margin: 20px;
  width: 281px;
  height: 281px;
  padding: 20px;
}
.cake {
  max-width: 281px;
}
.turkey {
  max-width: 281px;
}

 $(document).ready(function(){
    $(".cake").click(function(){
        alert("You're into your cake, huh?!");
    });
});

http://codepen.io/mentionbenjamin/pen/wzkGoy

尝试了一个小时，然后进入了圈子。

谢谢stackoverflow，一旦我知道我在做什么，我会回报社区!!

Answer 1

您根本没有包含Jquery文件。您需要包含自定义和其他jquery插件的Jquery文件才能工作。

将此标记添加到HTML

中

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

此外，您可以下载Jquery文件并将其放在本地项目文件夹中并指向该文件，上面的文件指向CDN，只有在您拥有互联网时才能使用（因为必须从云端下载）。

您修改后的codepen

Answer 2

$(function(){
 $(".cake").each(function(){
    $(this).click(function(){
         alert(' Your message');
      });
});
})

在jQuery中单击函数时，我无法显示警告

2 个答案: