Question

我试图通过单击锚点来更改源。到目前为止，这是我尝试过的：

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

Answer 2

您只需要检查Thu Nov 29 2018 07:42:00 GMT-0200的结束标记

</div>

Answer 3

$("a#popularity").on( "click", function() {
      $('.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'); 
})

<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>
  </a>
</div>
<div class="phone_banner Column">
    <img class="img_main" src="https://images.unsplash.com/photo-1542223616-740d5dff7f56?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1887f4d330d6bede705000e6ed7ba193&auto=format&fit=crop&w=500&q=60" alt="screenshot from iOS">
</div>

Answer 4

每个人都指出，无效的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必须是唯一的。如果没有，则用id进行选择，通常只会获得带有该id的第一个元素。您的JavaScript $("#popularity")将选择第一个锚点，然后将其附加点击处理程序。但是该锚不包含任何内容，不会塌陷，因此通常无法与之交互。用户所做的所有点击都发生在第二个锚点上，第二个锚点没有与之关联的点击处理程序。

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

Answer 5

您的html中有不平衡标记。关闭div后需要关闭a标签，然后再关闭a

喜欢

</div>
  </a>

$(document).ready(function() {

  $("#popularity").click(function() {
    $('.img_main').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg');
  })

})

<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 class="phone_banner Column">
    <img class="img_main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Larix_decidua_Aletschwald.jpg/220px-Larix_decidua_Aletschwald.jpg" alt="screenshot from iOS">
  </div>
</div>

单击时无法更改图像src

5 个答案: