jquery로 배열 내부의 내용을 선택하는 방법은 무엇입니까?

Question

마커와 팝업을 사용하여 leafpad openstreetmap을 만들었습니다. 이제 어떤 마커를 클릭했는지에 따라 해당 웹 사이트의 다른 <div id="plot">에 표시된 사진을 변경하고 싶습니다. div를 업데이트하기 위해 jquery를 사용하려고 생각했습니다. 내 문제는 이제 마커를 클릭하면 배열의 내용 (이미지 URL)을 얻는 것입니다 ... 나는 어떤 도움을 주셔서 감사하겠습니다. 그들이 전역 네임 스페이스 내에서하지로

function add_marker() { 
    var points = [ 
     ["P1", 51.57186, 11.8517, '<img src="img/1.JPG" alt="" width="350px">'], 
     ["P2", 51.57886, 11.8117, '<img src="img/2.JPG" alt="" width="350px">'], 
     ["P3", 51.57586, 11.8017, '<img src="img/3.JPG" alt="" width="350px">'] 
    ]; 

    var marker = []; 
    for (var i = 0; i < points.length; i++) { 
     marker[i] = new L.Marker([points[i][1], points[i][2]]) 
     marker[i].addTo(map); 
     marker[i].bindPopup(points[i][0]); 
     marker[i].on('click', onClick); 
    } 

    function onClick(e) { 
     $('#plot').html(points[i][3]); 
    }; 
} 

Answer 1

당신은, 당신의 onClick 함수에 인수로 points 및 i에 대한 참조를 전달할 필요가있다.

function add_marker() { 
    var points = [ 
     ["P1", 51.57186, 11.8517, '<img src="img/1.JPG" alt="" width="350px">'], 
     ["P2", 51.57886, 11.8117, '<img src="img/2.JPG" alt="" width="350px">'], 
     ["P3", 51.57586, 11.8017, '<img src="img/3.JPG" alt="" width="350px">'] 
    ]; 
    var marker = []; 
    var i; 
    for (i = 0; i < points.length; i++) { 
     marker[i] = new L.Marker([points[i][1], points[i][2]]) 
     marker[i].addTo(map); 
     marker[i].bindPopup(points[i][0]); 
     marker[i].on('click', function(e){ 
      onClick(e, points, i); 
     }); 
    }; 
}; 

function onClick(e, points, i) { 

    $('#plot').html(points[i][3]); 
}; 

Answer 2

function add_marker() { 
    var points = [ 
     ["P1", 51.57186, 11.8517, '<img src="img/1.JPG" alt="" width="350px">'], 
     ["P2", 51.57886, 11.8117, '<img src="img/2.JPG" alt="" width="350px">'], 
     ["P3", 51.57586, 11.8017, '<img src="img/3.JPG" alt="" width="350px">'] 
    ]; 
    var marker = []; 
    var i; 
    for (i = 0; i < points.length; i++) { 
     marker[i] = new L.Marker([points[i][1], points[i][2]]) 
     marker[i].addTo(map); 
     marker[i].bindPopup(points[i][0]); 
     // using a closure to avoid incorrect reference 
     (function (i) { 
      marker[i].on('click', function(e){ 
       onClick(e, points, i); 
      }); 
     })(i) 
    }; 
}; 

function onClick(e, points, i) { 
    $('#plot').html(points[i][3]); 
}; 

https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ 폐쇄 잘못