Question

我目前的功能设置如下：

$('.color').each(function(){
    $(this).val('stuff');
});

如您所见，对于每个.color函数，我将所选.color项的val设置为“stuff”。

但是，我只想在鼠标点击时设置$this的值。例如：

$('.color').each(function(){
    $(window).mouseup(function(){
        $(this).val('stuff');
    });
});

但是，这会将this更改为window，而不是将值保持在.color（或者我认为除非我弄错了。）

如何在保持相同值的同时仍然使用$(this)，就像它上面没有其他功能一样？

Answer 1

我认为你误解了registering events有共同class的元素。您无需迭代它，只需使用以下代码段即可。

尝试，

$('.color').mouseup(function(){
    $(this).val('stuff');
});

我想你可能会找这样的东西，

$(window).mouseup(function(e){
    if($(e.target).is('.color')){
      $(e.target).val('stuff');
    }
});

最后，如果你想采用wronger的方式，你可以通过使用缓存变量来纠正你的代码，这意味着在事件绑定之前缓存当前对象。

var cacheWinow= $(window);

$('.color').each(function(){
  var cacheThis = $(this);
  cacheWinow.mouseup(function(){
      cacheThis.val('stuff');
  });
};

Answer 2

然后你需要引用你正在谈论的对象

$('.color').each(function(){
    var $this = $(this);
    $(window).mouseup(function(){
        $this.val('stuff');
    });
});

不建议使用窗口部件，但更改整件事件并不能解答您的问题。

你应该在实际元素而不是窗口上使用mouseup

你应该做的另一件事是像这样包装window 一次

var $window = $(window);
$('.color').each(function(){
    var $this = $(this);
    $window.mouseup(function(){
        $this.val('stuff');
    });
});

如果不这样做，则每次jQuery时都会调用mouseup构造函数，而

Answer 3

试试这个：

$(window).mouseup(function(){
    $(".color").val('stuff');
});

Answer 4

您应该缓存.color。像这样：

$('.color').each(function () {
  var color = $(this);
  $(window).mouseup(function () {
      color.val('stuff');
  });
});

Answer 5

关于保留this或保留范围，您还可以使用proxy()或bind()等。使用proxy()的示例：

»Fiddle«

匿名函数：

$('.color').each(function(){
    $(window).mouseup(
        $.proxy(function(){ $(this).val('stuff') }, this)
        //                                            |
        //                                            +--- this is "this" of each
    )
});

命名功能：

function other(str) {
    $(this).val(str);
//     |
//     +---- "this" (in this case) is "this" of each.
}

$('.other').each(function(){
    $(window).mouseup(
        $.proxy(other, this, 'other stuff')
    //                   |      |
    //                   |      +--- Arguments
    //                   +---------- this is "this" of each
    )
});

至于这个案例是否是一个很好的解决方案是Rajaprabhu Aravindasam有一些好处的另一个讨论。

在保持“这个”的同时使用一个功能

5 个答案:

»Fiddle«