How to select content inside an array with jquery?

Question

I made an leafpad openstreetmap with marker and popups. I now want to change a picture displayed in another <div id="plot"> on that website depending on which marker clicked. For updating the div i thought of using jquery. My problem is now to get the content(image url) of the array when I click on a marker... I would appreciate any help.

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

SteamDev · Accepted Answer · 2016-06-28 22:29:52Z

2

You need to pass along references to points and i as arguments to your onClick function, as they are not within the global namespace.

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

answered Jun 28, 2016 at 22:29

SteamDev

4,4345 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Hermosilla Rodrigo Over a year ago

That's wrong! The i variable will contain "points.length - 1" value for all onClick() function.

GeekPlux · Accepted Answer · 2016-06-29 02:42:24Z

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/ explaining why using the closure

Collectives™ on Stack Overflow

How to select content inside an array with jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related