javascript - 单击时无法更改图像 src
问题描述
我正在尝试通过单击锚来更改源。这是我到目前为止所尝试的:
<div class="main">
<a id="popularity" href="#"><div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</a></div>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
</div>
JS:
$(document).ready(function() {
$("#popularity").click(function() {
$('.img_main').attr('src', 'img/phones/2.png');
})
});
当我点击我的链接时没有任何反应。
解决方案
它不起作用,因为您的 HTML 结构无效。</div>
您在最底部有一个额外的结束标签。删除它,它将为您工作。
请参阅下面的工作示例:
$(document).ready(function() {
$("#popularity").click(function() {
$('.img_main').attr('src', 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="popularity" href="#">
<div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</div>
</a>
</div>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
<!-- </div> <--- Remove this -->
推荐阅读
- asp.net - 在 npm 的 react-signup-login-component 上的 ASP.NET Web 应用程序中使用 ASP.NET Membership Provider
- c - 从 C 中的用户输入打印算术运算符“+”
- python - 我们如何验证 api postman 对 selenium python 中真实应用程序 ui 的响应?
- c# - 如果值在 Blazor 中无效,则重置输入字段值
- oracle - OBIEE12c(12.2.1.4) 配置助手在创建域步骤失败
- outlook - Outlook 加载项事件处理程序
- ansible - Ansible 中的调用变量
- android - 错误:不兼容的类型:
无法转换为 int final long _tmpKey_1 = _cursor.getLong(null); - angular - 构建后将 Google 字体添加到 Angular 项目
- angularjs - 当软键盘出现在移动设备中时,引导模式自动滚动到底部