Javascript 单击时无法更改图像src

我试图通过单击锚来更改源。这就是我迄今为止所尝试的：

<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>

当我点击我的链接时，什么也没有发生。

$（“a#popularity”）。在（“单击”，函数（）{
$（'.img_main'）.attr（'src'，'https://images.unsplash.com/photo-1542256015-e6bb100b3f4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=61c4ef1293dde4a044a0a3efa825e17e&auto=format&fit=crop&w=500&q=60’；
})

---

它无法工作，因为您的HTML结构无效。您在最底部还有一个附加的结束标记

。删除这个，它将为您工作

请参见下面的工作示例：

$（文档）.ready（函数（）{
$（“#受欢迎程度”）。单击（函数（）{
$（'.img_main'）.attr（'src'，'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png？v=73d79a89bded’；
})
});
html中存在不平衡标记。关闭
a
后的关闭
div
标记需要在关闭
a

像这样

</div>
  </a>

您只需检查

正如大家所指出的，无效的HTML结构是导致此问题的原因。通常，浏览器会尽可能地修复糟糕的HTML。在这种情况下，您将得到如下HTML：

<div class="main">
  <a id="popularity" href="#"></a><div class="banner-part l_banner_efs"><a id="popularity" href="#">
    <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>



请注意，锚点被分成两个元素，两个元素都具有相同的
id
<代码>id

s必须是唯一的。当它们不是时，并且您通过

id

选择，通常只会获得具有该

id

的第一个元素。您的javascript，

$（“#流行”）

，选择第一个锚点，然后将单击处理程序附加到该锚点。但该锚不包含任何内容，崩溃为零，因此无法正常与之交互。用户所做的所有单击都发生在第二个锚点上，该锚点没有与之关联的单击处理程序

当然，修复HTML结构将解决此问题

<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 class="phone_banner Column">
    <img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
  </div>
</div>

<div class="main">
  <a id="popularity" href="#"></a><div class="banner-part l_banner_efs"><a id="popularity" href="#">
    <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>