jQuery 引用 (this) 不起作用?

标签 jquery css-selectors

我有这个 href 链接,其文本为“attivo”或“non attivo”
用户可以使用 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;
        })

最佳答案

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

    function(date) { }

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

要防止用户单击两次,请向元素添加一个类

  $(this).addClass("hasbeenclicked")

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

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

关于jQuery 引用 (this) 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2529257/

相关文章:

javascript - 如何更改 chardin.js 中的文本颜色和样式

css - 你如何选择任何子元素?

html - 嵌套的父子悬停问题

html - 选择每个第一个和第四个(最后一个)div

jquery - 更改滚动条上 Bootstrap 导航栏的颜色

javascript - Bootstrap 4 - 隐藏导航栏折叠有效,但链接无效

jquery - 如何防止触发多个 jQuery UI droppables?

javascript - Kendo UI Web - DropDownList : select event doesn't return selected value properly

css - 根据它的值设置 CSS 元素的样式

css - 为什么这个 css 选择器不起作用?