对 (this) 的 jQuery 引用不起作用？

Question

我有这个带有文本“attivo”或“non attivo”的 href 链接
用户可以使用 ajax 请求 $.post() 在数据库中将项目设置为“活动”或“关闭”

我有两个问题：

1. 我无法获得对 $(this) 的引用。我用普通链接尝试了它，它可以工作，但没有包含在 if/else 中？？

2. 如何防止用户多次点击链接并提交多个请求？这是一个有效的担忧吗？我需要某种小计时器之类的东西吗？
   首先我在考虑一个 javascript 确认消息，但这对这个函数来说很烦人..

HTML：

<dl id='album-list'>
<dt id="dt-2">some title</dt>
<dd id="dd-2">
    some description<br />
    <div class='links-right'>status: <a class='toggle-active' href='#'>non attivo</a></div>
</dd>
</dl>

<a class="test" href="#">test</a>

JS：

        $('dd a.toggle-active').click(function() {
            var a_ref = $(this);
            var id = a_ref.parent().parent().attr('id').substring(3);
            if (a_ref.text() == "non attivo") {
                var new_active = "active"; // for db in english
                $.post("ajax-aa.php", {album_id:id, album_active:new_active},
                function(data) {
                    // alert("success");
                    a_ref.text("non attivo"); // change href text
                });
            } else {                
                var new_active = "closed"; // for db in english
                $.post("ajax-aa.php", {album_id:id, album_active:new_active},
                function(data) {
                    // alert("success");
                    a_ref.text("attivo"); // change href text
                });
            }
            return false;
        });     

        $('a.test').click(function() {
            var a_ref = $(this);
            $.post("ajax-aa.php", {album_id:2, album_active:"active"},
            function(data) {
                a_ref.text("changed");
            });
            return false;
        })

Answer 1

$(this) 应该在 if/else 中引用您的 a 元素，而不是在回调函数中。回调函数在不同的上下文中运行，所以在回调函数内部

    function(date) { }

this 不引用 a 元素。回调函数内部的this 与回调函数外部的this 不一样。 因为回调函数是一个闭包，所以它会保留对局部变量 a_ref 的引用。

为了防止用户点击两次，给元素添加一个类

  $(this).addClass("hasbeenclicked")

并在点击处理程序中检查是否已设置此设置，并且在设置时不执行任何操作：

  if ( ! $(this).is(".hasbeenclicked") ) {
  ....
  }

Answer 2

阻止用户多次单击链接的最简单方法是在用户单击链接时向链接添加类或其他内容。

a_ref.addClass('in-progress');

然后在 AJAX 请求完成后删除该类。

a_ref.removeClass('in-progress');

当用户第一次点击链接时，查看是否有请求在进行中；

if (a_ref.hasClass('in-progress')) {
    return'
};

编辑：更详细的示例：

$('a.test').click(function() {
    var a_ref = $(this);


    if (a_ref.hasClass('in-progress')) {
        return false;
    } else {
        a_ref.addClass('in-progress');
    }

    $.post("ajax-aa.php", {album_id:2, album_active:"active"},
    function(data) {
        a_ref.text("changed").removeClass('in-progress');
    });

    return false;
})