Question

我正在尝试更改图片HTML元素<img src="/some/dynamic/path"></img>的源图片。

我如何看待this.id是非常复杂的，并且超出了这个问题的上下文，但足以知道它是通过PHP获得的，并且在点击时，在列表项上获得（此处未显示），标识符已设置并可供使用。 console.log确保了。

问题是当我点击元素时，模态出现在我身上，但我看不到图像。通过在浏览器上调试，我注意到src字段始终为空。

我想问题的原因可以在我发布的Javascript代码中找到。特别是，两条指令的执行有点异步。

你怎么看？你还需要进一步的细节吗？

模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="modalImage" src="">
            </div>
        </div>
    </div>
</div>

JS代码：

$(".listShowCard").click(function() {
    console.log("/images/cards/"+this.id+".png");
    $("#modalImage").src="/images/cards/"+this.id+".png";
    $("#myModal").modal('show');
});

Answer 1

使用：

document.getElementById('modalImage').src=`/images/cards/${this.id}.png`;

当您使用带ID的元素时，请尽量避免使用jQuery，因为调用比纯JS调用慢得多。

Answer 2

 $("#modalImage").attr('src', "/images/cards/" + this.id + ".png")

动态更改图像源内部模态

2 个答案: