将.this转到下一个功能

Question

我正在使用Jquery属性名称过滤，以选择其中包含单词“world_map”的所有元素。我的html元素如下所示：#world_map_1，#world_map_2等......

然后我使用this.id在该函数中插入名称，以调用以前缀world_map_1开头的不同元素。例如world_map_1_panel_container

这一切都很好。

但是现在我正在寻找一种方法来从第二个函数中的第一个函数获取相同的前缀信息。在同一个功能中。如果我再次使用。它会引用第二个函数的选择器，而不是第一个函数的选择器......

这里有一些代码：

点击元素#world_map_8会为您提供选择器#world_map_8_panel_container

$('#'+'[id*="world_map"]').click(function() {
  $('#' +this.id+ '_panel_container').css('visibility','visible');

// Within this function I want to create a new function and be able to use that 
//same selector prefix so I don't have to hard code everything like I have to do 
//now. This is the second function within the previous one that's hard coded 
//at the moment: 

  $('#text_button').click(function() {
    $('#world_map_8_panel_movie_container').css('display','none');
  });
});

感谢您的任何提示！

Answer 1

你可以重新分配这个：

var that = this;

并在

中使用that

$('#text_button').click(function() {
     var something = that.id

这就是'上一个原创'外this

这样：

$('#'+'[id*="world_map"]').click(function() {
      var that = this;
      $('#' +that.id+ '_panel_container').css('visibility','visible');
          $('#text_button').click(function() {
                $('#' +that.id+ '_panel_container').css('display','none');

      });
});

that在声明的完整范围内仍然可用。

Answer 2

您只需将id存储在变量中：

$('#'+'[id*="world_map"]').click(function() {
    var id = this.id;
    $('#' +id+ '_panel_container').css('visibility','visible');
    $('#text_button').click(function() {
            $('#' +id+ '_panel_movie_container').css('display','none');
    });
});

内部函数可以访问外部函数中的变量。

Answer 3

Usig this通过Javascript函数

您的问题与一般问题类似，让我向您展示几种解决方法。

问题通常发生在window.setTimeout()次来电中，因为this在第一次通话后指向window。

示例代码：

function testObj() {
  this.a = "foobar";
  this.b = function() {
    console.log(this,this.a)
    window.setTimeout(this.b,1000)
  }
  this.b();
}

new testObj();

输出

testObj   "foobar"
DOMWindow undefined

在下次调用之后，该函数将DOMWindow写入控制台，这是错误的。之所以会发生这种情况，是因为window.setTimeout()函数会为this分配新的this。

---

使用变量将this存储在函数

之外

如果要保留function testObj() { var $this = this; this.a = "foobar"; this.b = function() { console.log($this,$this.a,"and this:",this) window.setTimeout($this.b,1000) } this.b(); } new testObj(); 值，则应使用变量并存储在此处。

示例代码：

testObj "foobar" "and this:" testObj
testObj "foobar" "and this:" DOMWindow
testObj "foobar" "and this:" DOMWindow
testObj "foobar" "and this:" DOMWindow
...

输出：

$this

此代码使用this变量存储指向testObj的原始this。 另外，您可以看到第一次通话后DOMWindow指向.bind。

---

使用this保留原始this

window.setTimeout函数将新的function testObj() { var $this = this; this.a = "foobar"; this.b = function() { console.log(this,this.a) window.setTimeout(this.b,1000) }.bind(this); this.b(); } new testObj(); 目标应用于调用的函数。如果要阻止将新目标应用于该函数，则应使用.apply()函数。

示例代码

testObj "foobar"
testObj "foobar"
testObj "foobar"
testObj "foobar"
...

输出：

this

---

在您的情况下

您应该使用变量并将.id或$('#'+'[id*="world_map"]').click(function() { var id = this.id; $('#' +id+ '_panel_container').css('visibility','visible'); $('#text_button').click(function() { $('#' +id+ '_panel_container').css('display','none'); }); }); 存储在本地变量中。

{{1}}

Answer 4

如果选择相同，那么为什么不从重新查询DOM的开销中保存自己呢？这是您在大型基于jQuery的应用程序中经常使用的模式：

$('#'+'[id*="world_map"]').click(function() {

  var $cache = $('#' +this.id+ '_panel_container');

  $cache.css('visibility','visible');

  $('#text_button').click(function() {
    $cache.css('display','none');
  });
});