javascript - 通过单击链接切换图像并禁用事件链接

Question

我有一个网页有很多 div，如下所示。它使用简单的 javascript 通过单击两个单独的链接来切换图像。 See fiddle .

HTML:

<div id="test">
   <img src="http://placehold.it/100x100" />
   <div class="caption">
      <h4>
        <a href="javascript:void(0)" onclick="toggleImg0('test')">Image1</a> 
        <a href="javascript:void(0)" onclick="toggleImg1('test')">Image2</a>
        </h4>
   </div>
</div>

JavaScript:

function toggleImg1(charName) {
   document.getElementById(charName).getElementsByTagName('img')[0].src = "http://placehold.it/150x150";
}

function toggleImg0(charName) {
   document.getElementById(charName).getElementsByTagName('img')[0].src = "http://placehold.it/100x100";
}

现在，我想禁用显示相应图像的链接(它应该像普通文本一样)。我该怎么做？

查看完整网页here .

Answer 1

你正在使用 JQuery 那么为什么不使用他的函数，给你的链接一个全局类 toggle_img 然后你可以使用 data attributes 定义您希望每个链接在单击时更改的 src，最后定义 click 事件并使用 src 属性更改 <强> .attr() 函数，检查下面的示例。

希望这对您有所帮助。

---

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://placehold.it/100x100" />
  <div class="caption">
    <h4>
      <a href="javascript:void(0)" class="toggle_img" data-src='http://placehold.it/100x100'>Image1</a>
      <a href="javascript:void(0)" class="toggle_img" data-src='http://placehold.it/150x150'>Image2</a>
    </h4>
  </div>
</div>

更新

通过添加额外的 css 类将事件图像的链接更改为简单文本，例如:

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));

  if (!$(this).hasClass("active"))
    $(this).addClass('active');

  $(this).siblings().removeClass('active');
})

.toggle_link {
  color: blue;
  text-decoration: underline;
  cursor: pointer
}

.active {
  color: black;
  text-decoration: none;
  cursor: default
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://placehold.it/100x100" />
  <div class="caption">
    <h4>
      <span class="active toggle_link toggle_img" data-src='http://placehold.it/100x100'>Image1</span>
      <span class="toggle_link toggle_img" data-src='http://placehold.it/150x150'>Image2</span>
    </h4>
  </div>
</div>