Question

我有这个href链接文本“attivo”或“non attivo”
用户可以使用ajax请求$ .post（）

在数据库中将项目设置为“活动”或“关闭”

我有两个问题：

我无法获得对$（this）的引用。我尝试使用普通链接并且它可以正常工作，但不包含在if / else中
如何阻止用户在链接上多次点击并提交多个请求？这是一个有效的问题吗？我需要某种小型计时器吗？首先我在考虑一个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中的一个元素，但不在回调函数内部。回调函数在不同的上下文中运行，因此在回调函数

中

    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;
})

jQuery引用（this）不起作用？

2 个答案: