Question

$('.classToClick').live("click", function () {
    $(this).attr('disabled', 'disabled');
    $(this).val("lol");
    $.post('post.php', {
        string: "lalala"
    }, function (data) {
        $(this).removeAttr('disabled');
    });
})

此代码不起作用，因为在帖子中我们使用$(this)。当我们将其更改为.classToClick时，它会起作用。

如何才能点击元素的类，以便我们可以像这样使用它？

$('.classToClick').live("click", function () {
    var className = $(this).name;
    $(this).attr('disabled', 'disabled');
    $(this).val("lol");
    $.post('post.php', {
        string: "lalala"
    }, function (data) {
        $(className).removeAttr('disabled');
    });
})

是否可以做类似的事情？

Answer 1

单击后，您需要捕获类名，可以通过以下方式完成：

var className = $(this).attr('class'); //Alternatively, $(this).prop('class')

当你稍后在$ selector中引用它时，你需要包含句点来表示正在选择一个类，如下：

$('.' + className).removeAttr('disabled');

<强>代码：

$('.classToClick').live("click", function() 
{   
    var className = $(this).attr('class');    
    $(this).attr('disabled', 'disabled').val("lol");

    $.post('post.php', {string : "lalala"}, function(data)
    {
        $('.' + className).removeAttr('disabled');
    });
})

<强> Working Example

Answer 2

这将有效：

$('.classToClick').live("click", function() {       
   var $el = $(this);
   $el.attr('disabled', 'disabled');
   $el.val("lol");
   $.post('post.php', {string : "lalala"}, function(data) {
       $el.removeAttr('disabled');
   });
});

在var中存储jquery el比一次又一次地调用$(this)更有效。有一个谷歌保罗爱尔兰和jQuery性能提示：）

Answer 3

基本上在$.post $(this)的回调代表什么都没有，你可以将$（this）分配给一个变量，然后使用该变量来处理这样的事情

var $field = $(this);

然后可以将其用作

$('.classToClick').live("click", function() {   
      var className = $(this).name;    
      $(this).attr('disabled', 'disabled');
      $(this).val("lol");
      var field = $(this);
      $.post('post.php', {string : "lalala"}, function(data) {
        $(field).removeAttr('disabled');
      });

}）

Answer 4

您还可以为回调设置上下文。同样，更改元素属性的正确方法是使用prop()方法。

$('body').on('click', '.classToClick', function() {    
   $(this).prop('disabled', true)
          .val("lol");
   $.ajax({
     type: 'POST',
     url: 'post.php',
     context:  $(this)
     data: {
       string : "lalala"
     },
     success:  function(data) {
       this.prop('disabled', false);
     }
   });
})

Answer 5

$(this).name通常会为您提供undefined或null值，因此无效。您可以做的是将对象的引用存储在局部变量中，然后在后成功处理程序中使用它。试试这个。

$('.classToClick').live("click", function() {   
       var $elem = $(this).attr('disabled', 'disabled').val("lol");
       $.post('post.php', {string : "lalala"}, function(data) {
           $elem.removeAttr('disabled');
       });
});

从element获取类名，并选择具有相同类的所有元素

5 个答案: