javascript - 如何使用 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

您需要将对 points 和 i 的引用作为参数传递给您的 onClick 函数，因为它们不在全局命名空间中。

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