使用javascript将参数传递给另一个函数（this）

Question

I think that my element in renderGrid() contains an html element so I wanna replace "#container" with this. Simply I wanna make my code universal because now I can only use it for "#container" so "#container" has to be replaced with something like template.

 function renderGrid(element, settings) { var x = settings.columns; var y = result.length / x; $('.grid').remove(); for (var cols = 0; cols < x; cols++) { for (var rows = 0; rows < y; rows++) { numberOfTiles = x * y; $('#container').append("<div class='grid'><div class = 'usernameSpace'></div></div>"); }; }; $('.grid').width(800 / x); $('.grid').height(800 / x); } (function ($) { $.fn.tiles = function (options) { var settings = getOptions(options); return this.each(function () { var grid = renderGrid(this, options); fillTilesWithContent(this, options); colorTiles(this, options); columnCountSet(this,options); return grid; }); } })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Maybe place your related methods into a class and set a class variable, for example

Class GridRenderer {
  var _container;
  function call(element, settings) {
    _container = element;
    renderGrid(settings);
  }
  function createGrid(x, y) {
    $('.grid').remove();
    for (var cols = 0; cols < x; cols++) {
      for (var rows = 0; rows < y; rows++) {
        numberOfTiles = x * y;
        _container.append("<div class='grid'><div class = 'usernameSpace'></div></div>");
      };
    };
    $('.grid').width(800 / x);
    $('.grid').height(800 / x);
  };

  function refreshGrid(x, y) {
    createGrid(x, y);
  };

  function renderGrid(settings) {
    var x = settings.columns;
    var y = result.length / x;
    refreshGrid(x, y);
  }
}

Then

var grid = GridRenderer.call(this, options);