javascript - 使用 $(this) 获取被点击的元素

Question

嘿，我有这个愚蠢的问题，我希望你能帮助我解决它。我有一些“a”元素，我只想在单击时添加一个活动类。

我试过这个：

<a href="javascript:mifunction()"></a>

js:
function mifunction(){
 $(this).addClass('active');
}

但它不起作用，所以我尝试了这个：

<a></a>

js:
$('a').click(function() {
  $(this).addClass('active');               
});

它也不起作用。当我混合两者时它才起作用。但是用户必须双击该元素，这不是一个选项：

<a href="javascript:mifunction()"></a>
js:

function mifunction(){
 $('a').click(function() {
   $(this).addClass('active');              
 });
}

你知道如何解决这个问题吗？

非常感谢你！

Answer 1

它在这里与您的第二个示例一起工作：

• 演示

可能您需要将 jQuery 代码包装在：

$(function() {

  $('a').click(function() {
     $('a.active').removeClass('active'); // you may also want to remove previous
     $(this).addClass('active');               
  });

});

还要确保在 HTML 中包含 jQuery 库路径：

<script type="text/javascript" src="/path/jQuery.min.js"></script>

或者：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

编辑：

（链接是动态添加的）

$(function() {

  $('a').on( 'click', function() {
     $('a.active').removeClass('active'); // you may also want to remove previous
     $(this).addClass('active');               
  });

});

Answer 2

您正在混合和匹配使用 DOM 和 JavaScript 的新旧方式。

这

$('a').click(function() {
    $(this).addClass('active');
}

应该可以正常工作。

把它放在里面$(document).ready(function() {});

所以..从字面上看应该是这样的：

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() { 
            $(this).addClass('active');
        });
    });
</script>
<a>Click me</a>

---

此外，如果你只是想设计样式.. 你可以通过 CSS
For Active: a:active { color: orange; }
For Visited:a:visited { color:green; }

Answer 3

您的问题必须存在于其他地方，因为这很好用：

$('a').click(function () {
   $(this).addClass('active'); 
});​

如果您要动态创建锚点，则应.on()改为使用：

$('#container').on('click', 'a', function () {
    $(this).addClass('active'); 
});

示例.on()：http: //jsfiddle.net/jbabey/bqgFN/1/

文档.on()：http ://api.jquery.com/on/

Answer 4

尝试像下面那样做，

<a class="link" href="javascript:void(0)"></a>

$(function () {
   $('.link').click (function () {
      $(this).addClass('active');
   });
});