Question

我用标记和弹出窗口创建了一个leafpad openstreetmap。我现在想要更改该网站上另一个<div id="plot">显示的图片，具体取决于点击的标记。为了更新div我想使用jquery。我现在的问题是当我点击标记时获取数组的内容（图片网址）... 我将不胜感激任何帮助。

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

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

onClick

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/解释了使用闭包的原因

如何用jquery选择数组内的内容？

2 个答案: