Question about how to use Map as a global variable

Asked 2 years ago, Updated 2 years ago, 37 views

Uncaught TypeError: titleMap.put is not a function error when used in function addTab

Normal operation when used just below the global variable... How do I use it as a global variable?

$(document).ready(function() {
    // Map Common
    Map = function(){
      this.map = new Object();
    };   
    Map.prototype = {   
        put : function(key, value){   
            this.map[key] = value;
        },   
        get : function(key){   
            return this.map[key];
        },
        containsKey : function(key){    
         return key in this.map;
        },
        containsValue : function(value){    
         for(var prop in this.map){
          if(this.map[prop] == value) return true;
         }
         return false;
        },
        isEmpty : function(key){    
         return (this.size() == 0);
        },
        clear : function(){   
         for(var prop in this.map){
          delete this.map[prop];
         }
        },
        remove : function(key){    
         delete this.map[key];
        },
        keys : function(){   
            var keys = new Array();   
            for(var prop in this.map){   
                keys.push(prop);
            }   
            return keys;
        },
        values : function(){   
         var values = new Array();   
            for(var prop in this.map){   
             values.push(this.map[prop]);
            }   
            return values;
        },
        size : function(){
          var count = 0;
          for (var prop in this.map) {
            count++;
          }
          return count;
        }
//        ,
//        //        toStrong:function(){bar s=[];
//          //          for(var prop in this.map) s.push(prop+':'+this.map[prop]);
//          //          return s.join(',');
//        }
    };

    $('#pageTab').on('click', ' li a .close', function() {
      var tabId = $(this).parents('li').children('a').attr('href');
      $(this).parents('li').remove('li');
//      //      titleMap.remove(tabId);
      $(tabId).remove();
      reNumberPages();
      $('#pageTab a:first').tab('show');
    });

    $("#pageTab").on("click", "a", function(e) {
      e.preventDefault();
      $(this).tab('show');
    });
  });

  var pageNum = 1;
  var titleMap = new Map();
  titleMap.put("key","data");
        console.log(titleMap);

  function reNumberPages(){
    pageNum = 1;
    var tabCount = $('#pageTab > li').length;
    $('#pageTab > li').each(function(){
      var pageId = $(this).children('a').attr('href');
      if(pageId == "#page1"){
        return true;
      }
      pageNum++;
      //tab header Title
      $(this).children('a').html(titleMap.get(pageId)+'<button class="close" type="button" ' + 'title="Remove this page">x</button>');
    })
  }


  function addTab(title){
    pageNum++;
    var pageId = '#page'+pageNum;
    titleMap.put(pageId, title);
//    //    titleMap.put(pageId,title);
    // // tab header title
    $('#pageTab').append($('<li><a href="#page' + pageNum + '">' + title +'<button class="close" type="button" ' +'title="Remove this page">x</button>' +'</a></li>'));
    $('#pageTabContent').append($('<div class="tab-pane" id="page' + pageNum +'">Content page' + pageNum + '</div>'));
    $('#page' + pageNum).tab('show');
  }

javascript jquery html

2022-09-22 08:05

1 Answers

When I turned the source, there was an error that there was no put method in the titleMap. Assuming you're right to ask this,

var titleMap = new Map();
titleMap.put("key","data");

This is because the time when the above code is executed is faster than when the put method is added to the map. If you look at the attached code:

$(document).ready(function() {
    // Map Common
    Map = function(){
      this.map = new Object();
    };   
    Map.prototype = {   
        put : function(key, value){   
            this.map[key] = value;
        },   

    // Omitted

It looks like this, but this part will not run until after HTML rendering, so it says that there is no put in the title map. So please revise it as below:

// Map Common
Map = function(){
  this.map = new Object();
};   
Map.prototype = {   
  put : function(key, value){   
    this.map[key] = value;
  },   
  get : function(key){   
    return this.map[key];
  },
  containsKey : function(key){    
    return key in this.map;
  },
  containsValue : function(value){    
    for(var prop in this.map){
      if(this.map[prop] == value) return true;
    }
    return false;
  },
  isEmpty : function(key){    
    return (this.size() == 0);
  },
  clear : function(){   
    for(var prop in this.map){
      delete this.map[prop];
    }
  },
  remove : function(key){    
    delete this.map[key];
  },
  keys : function(){   
    var keys = new Array();   
    for(var prop in this.map){   
      keys.push(prop);
    }   
    return keys;
  },
  values : function(){   
    var values = new Array();   
    for(var prop in this.map){   
      values.push(this.map[prop]);
    }   
    return values;
  },
  size : function(){
    var count = 0;
    for (var prop in this.map) {
      count++;
    }
    return count;
}
//    ,
//    //    toStrong:function(){bar s=[];
//      //      for(var prop in this.map) s.push(prop+':'+this.map[prop]);
//      //      return s.join(',');
//    }
};

$(document).ready(function() {
  $('#pageTab').on('click', ' li a .close', function() {
    var tabId = $(this).parents('li').children('a').attr('href');
    $(this).parents('li').remove('li');
    //      //      titleMap.remove(tabId);
    $(tabId).remove();
    reNumberPages();
    $('#pageTab a:first').tab('show');
  });

  $("#pageTab").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
  });
});

var pageNum = 1;
var titleMap = new Map();
titleMap.put("key","data");
console.log(titleMap);

function reNumberPages(){
  pageNum = 1;
  var tabCount = $('#pageTab > li').length;
  $('#pageTab > li').each(function(){
    var pageId = $(this).children('a').attr('href');
    if(pageId == "#page1"){
      return true;
    }
    pageNum++;
    //tab header Title
    $(this).children('a').html(titleMap.get(pageId)+'<button class="close" type="button" ' + 'title="Remove this page">x</button>');
  });
}

function addTab(title){
  pageNum++;
  var pageId = '#page'+pageNum;
  titleMap.put(pageId, title);
  //    //    titleMap.put(pageId,title);
  // // tab header title
  $('#pageTab').append($('<li><a href="#page' + pageNum + '">' + title +'<button class="close" type="button" ' +'title="Remove this page">x</button>' +'</a></li>'));
  $('#pageTabContent').append($('<div class="tab-pane" id="page' + pageNum +'">Content page' + pageNum + '</div>'));
  $('#page' + pageNum).tab('show');
}


2022-09-22 08:05

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.