Question

我希望限制每个锚标记多次添加图标。

如果你多次点击任何一个链接（foo，bar，baz），它会不断添加很多次。

如何阻止这种想法？

$('a').click(function() {
  $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this))
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a>foo</a>
<br>
<a>bar</a>
<br>
<a>baz</a>

Answer 1

您可以简单地使用jQuery one()方法。这样，每个click事件每个元素最多可执行一次代码。

代码：

$('a').one('click', function() {
  $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this))
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a>foo</a>
<br>
<a>bar</a>
<br>
<a>baz</a>

Answer 2

当您向该锚添加图标添加类时，稍后检查它是否已经具有该类。 FIDDLE

$('a').click(function() {
if(!$(this).hasClass('have-icon')) {
$(this).addClass('have-icon')
  $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this))
}
});

Answer 3

尝试这样，点击按钮删除glyphicon并在删除旧的后添加glyphicon ,,,我认为这会对你有所帮助....

＆＃13;

$(document).ready(function(){
$('a').click(function() {
   var aa=$(this).prev('a:has(>i)').remove()
  // console.log(aa)
  $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this))
});
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a>foo</a>
<br>
<a>bar</a>
<br>
<a>baz</a>

＆＃13;

Answer 4

将CSS类添加到之前已添加项目的元素中。

$('a').click(function() {
  if ($(this).hasClass('item-already-added') == false)
  {
      $('<a href="#">...').insertBefore($(this));
      $(this).addClass('item-already-added');
  }
});

我在锚标签的前面添加了一个图标但是，我想阻止它多次添加图标

4 个答案: