How to include a loop in a jquery function

Question

I am using jquery imagemapster to generate an image map with highlighted areas and tooltips on hover.

I have a 100 different areas and tooltips in my image (all with elements numbered 1-100) and all works well.

However, I want to write a function that will allow me to loop through each of these elements so I don't have to write the key and tooltip code 100 times. What is the best way for me to do this?

I have tried each() and for (i = 0; i < 100; i++) { //code here } but I think the looped output is causing errors.

Current code that needs the loop in the Areas section below. 3 lines shown as example of the 100.

Many Thanks

$(document).ready(function () {

  $('img').mapster({
  showToolTip: true,
  toolTipContainer: '<div class="map_popup"></div>',
  singleSelect : true,
  clickNavigate : true,
  mapKey: 'data-key',
  fill : true, 


  areas: [ 

    // below line needs to be looped. 3 examples shown

    { key: "1", toolTip: "<h3>Controller 1</h3>:<?php echo $Selected_1; ?>" },
    { key: "2", toolTip: "<h3>Controller 2</h3>:<?php echo $Selected_2; ?>" },
    { key: "3", toolTip: "<h3>Controller 3</h3>:<?php echo $Selected_3; ?>" },
    // ...
  ]

});

Answer 1

Not sure what is going on with the $arraySelected in other answer & how that will loop 100 times.

I had a solution before generating data with javaScript, but that is going to render the <?php echo $Selected_1; ?> useless as this is done server-side and the js is done client-side.

Need to generate the areasData server-side. I would do:

// just data, don't need to wait until DOM is ready
// since you're outputting via PHP, you have to generate data with PHP
const areasData = [
  <?php
    $loopNo = 100;
    for ($i = 1; $i <= $loopNo; $i++) {
        echo '{ key: "' . $i . '", toolTip: "<h3>Controller 1</h3>:' . ${'Selected_' . $i} . '" }';
        if ($i < $loopNo) {
            echo ',';
        }
    }
  ?>
];

$(document).ready(function() {
  // then reference the areas data
  $("img").mapster({
    showToolTip: true,
    toolTipContainer: '<div class="map_popup"></div>',
    singleSelect: true,
    clickNavigate: true,
    mapKey: "data-key",
    fill: true,
    areas: areasData
  });
});

Umm, down voters explain why? Thanks.

Answer 2

EDIT: Try iterate through images like this:

$(document).ready(function() {
    $('img').each(function(ix,ex){
        $(ex).mapster({
            showToolTip: true,
            toolTipContainer: '<div class="map_popup"></div>',
            singleSelect: true,
            clickNavigate: true,
            mapKey: 'data-key',
            fill: true,
            areas: [
            <?php
            foreach ($arraySelected as &$Selected) {%>
                {
                    key: "1",
                    toolTip: "<h3>Controller <?php ech $Selected.id?></h3>:<?php echo $Selected.Text; ?>"
                },
            <?php}
            ?>];
        });
    });
});