如何在 jquery 函数中包含循环

Question

我正在使用 jquery imagemapster 生成带有突出显示区域和悬停工具提示的图像地图。

我的图像中有 100 个不同的区域和工具提示（所有元素都编号为 1-100）并且一切正常。

但是，我想编写一个函数来循环遍历每个元素，这样我就不必编写 100 次键和工具提示代码。我执行此操作的最佳方法是什么？

我已经尝试了 each() 和 for (i = 0; i < 100; i++) { //code here }，但我认为循环输出导致了错误。

需要下面“区域”部分中的循环的当前代码。 3 行显示为 100 的示例。

非常感谢

$(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

编辑：尝试像这样遍历图像：

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

Answer 2

不确定其他答案中的 $arraySelected 是怎么回事以及它如何循环 100 次。

我在使用 javaScript 生成数据之前有一个解决方案，但这将使 <?php echo $Selected_1; ?> 变得无用，因为这已完成 server-side 并且 js 已完成 client-side.

需要生成区域数据server-side。我会这样做：

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

嗯，投票失败者解释为什么？谢谢

如何在 jquery 函数中包含循环

How to include a loop in a jquery function

javascript

each

jquery

for-loop

imagemapster