Получение .this к следующей функции

Question

Я использую фильтрацию имен атрибутов Jquery, чтобы выбрать все элементы, в которых есть слова "world_map".Мои HTML-элементы выглядят так: #world_map_1, #world_map_2 и т. Д. *

Затем я использую this.id, чтобы вставить имя в эту функцию для вызова различных элементов, начиная с префикса world_map_1.Например, world_map_1_panel_container

все это прекрасно работает.

Но сейчас я ищу способ получить ту же информацию префикса из первой функции во второй функции.В той же функции.Если я снова использую .that, он будет ссылаться на селектор из этой второй функции, а не на селектор первой функции ...

вот какой-то код:

нажатие на элемент #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

Вы можете просто сохранить идентификатор в переменной:

$('#'+'[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 2

Вы могли бы переназначить это:

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 3

Использование 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 с .apply().

---

Использование переменной для хранения 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

Функция window.setTimeout применяет новую цель this к вызываемой функции. Если вы хотите предотвратить применение новой этой цели к функции, вам следует использовать функцию .bind().

Пример кода

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

Выход:

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

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