如何使用单个按钮更改单个图像...？

Question

我正在为一个朋友构建一个 HTML 文档。这个想法是他的孩子真的很喜欢汽车，所以他可以去这个网站并点击网站上的按钮，这些按钮会给他不同的汽车图像。我试图连接一个情况，在页面上会有 9 个不同的汽车图像，每个图像下面都有一个按钮，他可以单击该按钮，只会更改他单击的一个图像。我一直在努力实现这一目标，而在 Stack Overflow 上寻找解决方案让我更加困惑。我希望有人可以提供帮助。

这是我已经尝试过的......

HTML -

<div class="carsButton">
    <img src="https://source.unsplash.com/344x220/?cars" width="100%" height="225">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center"
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>

JS-

function buttonClickThing () {
    var d = new Date();
    document.getElementsByClassName("carsButton", "carsImage").src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

    console.log(' done ');

}

我输入了“完成”控制台注释，以便我知道按钮工作正常。我会看到“完成”出现在控制台上，但图像不会改变。我相当确定我的格式错误或连接图像/按钮错误。我希望这里的社区可以帮助我。

Answer 1

<div class="carsButton">
<img src="https://source.unsplash.com/344x220/?cars" width="100%" height="225">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="buttonClickThing(this)">Refresh Image</button>
            </div>
        <small class="text-muted">1</small>
    </div>
</div>

JS

function buttonClickThing(elem) {
   var d = new Date();

  elem.closest('.carsButton').querySelector('img').src = 
  "https://source.unsplash.com/344x220/?cars" + d.getTime()

  console.log(' done ');
}

Answer 2

调用document.getElementBy....时需要引用<img>元素。 尝试以下解决方案：

function buttonClickThing () {
    var d = new Date();
    document.getElementById("carImg").src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carsButton">
    <img src="https://source.unsplash.com/344x220/?cars" id="carImg" width="100%" height="225">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center"
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>

Answer 3

当您使用ElementByClassName 时，它​​会返回对象数组。那么你必须选择第一个对象然后你可以改变它的 src 属性。 使用此代码：

<div>
    <img class="carsButton" src="https://source.unsplash.com/344x220/?cars" width="500" height="225">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>

<script>
    function buttonClickThing () {
    var d = new Date();
    document.getElementsByClassName("carsButton")[0].src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

    console.log(' done ');

}
</script>