如何在按钮单击时更改图像和内容答案

【问题标题】：How to change Image & Content on button click如何在按钮单击时更改图像和内容
【发布时间】：2021-03-15 16:08:04
【问题描述】：

我有一个布局，左侧有一个大的全高图像，右侧有一个 6 个网格单元布局。

网格单元格布局应该像按钮一样，当您单击单元格时会更改左侧的图像。

我是 JS 新手，对 DOM 操作略知一二。所以我不知道从哪里开始。

感谢您帮助我！ :)

const tourOne = document.getElementById('gridcell-604c88677d');
tourOne.onclick = changeImage();

function changeImage() {
console.log('hello world');
}

【问题讨论】：

请分享最低限度的 HTML、CSS 和您尝试的 JS，请参阅 minimal reproducible example
您可能想了解事件监听器：w3schools.com/js/js_htmldom_eventlistener.asp

标签： javascript html css dom event-listener

【解决方案1】：

不用jquery也可以改

let img = document.getElementById('main_image');
img.src = "https://via.placeholder.com/100";

请查看此代码笔示例：https://codepen.io/jakir-sajib-hossen/pen/YzpgjrN

【讨论】：

好吧，我想基本上解决了它，但我没有 img 属性我有一个部分并将它的背景设置为图像。如何在 JS 中引用它？谢谢！
如果你的部分 class= image-continer then => document.querySelector('.image-continer').style.backgroundImage = "url('via.placeholder.com/100')";

【解决方案2】：

使用此 jQUery 代码，您可以通过单击按钮更改图像的来源。将此行放在您的 changeImage() 函数中。

$("#gridcell-604c88677d").attr("src","second.jpg");

Source

【讨论】：