javascript - 使用 src 和 alt 替换图像
问题描述
我的网站中有一个部分致力于更改语言。现在,在一个圆形按钮中,我有英国国旗。这是默认选项。
<a class="nav-link-language js-language-trigger">
<img src="http://my-site.test/wp-content/uploads/2018/04/260-united-kingdom.png" alt="">
例如,我有德语选项
<div class="nav-link-language-holder">
<a><img src="http://my-site.test/wp-content/uploads/2018/04/260-germany.png" alt=""><i>German</i></a>
</div>
我如何使用 javscript 进行设置,当用户单击德国的图标时,它将被替换为默认选项(现在是英国)
非常感谢
解决方案
这是更改 img src 的快速方法:
<img id="Your_IMG_ID" src="olg-img-src.png">
<button onclick="change_img_src()">Change SRC</button>
<script>
function change_img_src() {
document.getElementById("Your_IMG_ID").src = "new-img-src.png";
}
</script>
为了概括您正在寻找的内容并进一步简化它,这是一种方法:
<!--- Your main flag --->
<img id="main-flag" style="cursor:pointer" src="img.png"/>
<!--- Rest of flags --->
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-2.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-3.png"/>
<!----Other flags---->
<script>
function Change_flag(_src) {
document.getElementById("main-flag").src = _src;
}
</script>
推荐阅读
- javascript - 如何从外部访问 Vue 3 方法
- azure-ad-b2c - 用户登录后如何在 Blazor 服务器端应用程序中检索用户声明?
- angular - 如何在 Angular 中访问 SQLite executesql 的返回值
- python - 来自 Python 中的测试目录的 ImportError
- python - 如果我的登录用户名和密码在我的登录窗口中正确,如何在 Tkinter 中打开一个新窗口?
- sql - 如何对 sql db2-400 中的列值进行排序?
- javascript - 如果它在回调中,Chai 期望不会失败测试
- authentication - 我已将我的 DNN9 站点设置为需要电子邮件地址作为登录名,但现在我无法再以超级用户身份登录 - 超级用户登录名是主机
- paypal - “您的付款已被拒绝。请重试。” Magento 2.3.2
- webview - 如何让 flutter_inappwebview 在暂停时加载带有视频的 youtube 页面?