Question

I’m using the Jquery attribute name filtering, to select all elements that have the words “world_map” in them. My html elements look like this : #world_map_1, #world_map_2 etc…

Then I use this.id to insert the name within that function to call different elements starting with the prefix world_map_1. For example world_map_1_panel_container

this all works fine.

But now i’m looking for a way to get that same prefix information from the first function in a second function. Within that same function. If I use .that again it will refer to the selector from that second function, and not of the selector of the first function…

here’s some code:

clicking on the element #world_map_8 will give you the selector #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');
  });
});

Thanks for any tips!

Answer 1

you could do a reassigning of this:

var that = this;

and use that inside

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

where that is the ‘previous original’ outer this

so:

$('#'+'[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 remains available in the complete scope it is declared in.