循环 jQuery 脚本以获取元素列表

Posted 2023-03-16

【中文标题】循环 jQuery 脚本以获取元素列表

【英文标题】：Loop jQuery script for a list of elements

【发布时间】：2021-12-14 07:00:24

【问题描述】：

我需要为一长串对象执行以下 jQuery 脚本。

$("#ID_001").change(function(event) 
    event.preventDefault();
    if(map.hasLayer(ID_001)) 
        $(this).removeClass('selected');
        map.removeLayer(ID_001);
     else 
        map.addLayer(ID_001);
        $(this).addClass('selected');
   
);

我做了什么

使用以下资源：

api.jquery.com jquery-loop-for-script jquery-for-each-looping-a-list-of-objects

我认为这不是上述问题的重复问题，因为它包含一个事件处理函数。

我已经编写了以下循环，但这仍然不起作用。我不明白问题出在哪里。

var obj = 
    "#ID_001": "ID_001",
    "#ID_002": "ID_001"
  ;

  $.each( obj, function( key, value ) 
    $(key).change(function(event) 
        event.preventDefault();
        if(map.hasLayer(value)) 
            $(this).removeClass('selected');
            map.removeLayer(value);
         else 
            map.addLayer(value);
            $(this).addClass('selected');
       
    );
  );

谁能给我解释一下问题出在哪里？

更多详情

脚本是 LeafLet 地图控制按钮的一部分。当我点击 #ID_001 元素时，Chrome DevTool 显示此错误消息，所以我认为问题在于 value 变量没有得到正确的值。

未捕获的类型错误：无法在字符串上创建属性“_leaflet_id” 'L_puntiA' 在 m (Util.js:56) 在 i.hasLayer (Layer.js:211) 在 htmlInputElement。 (mymap_main.js:103) 在 HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2) 在 HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)

【问题讨论】：

您对两个键使用相同的值两次。这可能是个问题，但如果没有minimal-reproducible-example 就很难说清楚。您还可以在第一个代码块中使用 ID_001 作为可变量，在第二个代码块中使用字符串。

感谢@MarkBaijens，关键事实是我在第一个块中使用 ID_001 作为变量，在第二个块中使用字符串。没有引号它有效！你帮了我！

很高兴我能帮上忙。添加了一个答案，以便可以将此问题设置为已解决。

【参考方案1】：

正如评论中整理的那样，您的问题是您使用字符串而不是变量来定义对象。

代替：

var obj = 
  "#ID_001": "ID_001",
  "#ID_002": "ID_001"
;

用途：

var obj = 
  "#ID_001": ID_001,
  "#ID_002": ID_002
;