javascript - 单击时无法更改图像源

Question

我正在尝试通过单击 anchor 来更改源。这是我到目前为止所尝试过的:

<div class="main">
  <a id="popularity" href="#"><div class="banner-part l_banner_efs">
    <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
    <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
    <p class="banner-text">Dynamic audience size and sales counters</p>
  </a></div>
  <div class="phone_banner Column">
    <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
  </div>
</div>

JS:

$(document).ready(function() {

  $("#popularity").click(function() {
      $('.img_main').attr('src', 'img/phones/2.png');
    })

});

当我点击链接时没有任何反应。

Answer 1

它不起作用，因为您的 HTML 结构无效。您还有一个额外的结账</div>标签在最底部。删除它，它将为您工作。

请参阅下面的工作示例:

$(document).ready(function() {
  $("#popularity").click(function() {
    $('.img_main').attr('src', 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a id="popularity" href="#">
    <div class="banner-part l_banner_efs">
      <img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
      <h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
      <p class="banner-text">Dynamic audience size and sales counters</p>
    </div>
  </a>
</div>

<div class="phone_banner Column">
  <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
<!-- </div> <--- Remove this -->