javascript - 无法动态更改图像

我正在尝试为响应式网站动态更改图像。当我调整浏览器大小时，什么也没有发生。我的代码有什么问题吗？

<script type = "text/javascript">

$(window).ready(function() {
var wi = $(window).width();


$(window).resize(function() {
    var wi = $(window).width();

    if (wi <= 480){
       document.getElementsByClassName('party')[0].src="images/1.jpg"
        }
   else {
        document.getElementsByClassName('party')[0].src="images/5.jpg"
        }
});
});

我的HTML如下：

<div class="party">
        <div class="dance">
          <h2 id="head">Your Party begins here</h2>
          <p id="intro1">Start dancing</p>
          <a id="starter" href="#" >Dance now</a> </div>
        <a id="main" href="#"><img class="img-responsive" src="images/default.jpg" alt="main image"></a>

最佳答案

$(window).ready(function() {


$(window).resize(function() {
    var wi = $(window).width();

    if (wi <= 480){
       $("#main").find("img").attr("src","images/1.jpg")
        }
   else {
       $("#main").find("img").attr("src","images/5.jpg");
        }
});
});

尝试使用此代码，您也不必两次声明wi。

关于javascript - 无法动态更改图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31090175/