javascript - 用于生成事件的 for 循环答案

【问题标题】：javascript - for loop to make eventsjavascript - 用于生成事件的 for 循环
【发布时间】：2011-10-16 15:40:17
【问题描述】：

我正在使用一个脚本，我需要在其中创建多个事件以显示弹出窗口。

我试过了，但它不起作用：

for (i=0;i<=storingen;i++)
    {
        $("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
    }

输出应该是：

$("#storing0").click(function(){ centerPopup(); loadPopup(); });
$("#storing1").click(function(){ centerPopup(); loadPopup(); });
$("#storing2").click(function(){ centerPopup(); loadPopup(); });
$("#storing3").click(function(){ centerPopup(); loadPopup(); });

等等

但是id为#storing(number here)的div的数量是可变的，所以我想做这个，但它不起作用......

我从 php 获取 storageen 变量：

<script type="text/javascript">aantalstoringen('.$aantalstoringen.')</script>

我在 js 文件中像这样选择：

function aantalstoringen(storingen){
    storingen=storingen;
}

我做了一个alert(storingen)，它追踪到了正确的数字，所以没关系。

可能是 for 循环不起作用，因为它不在 anantalstoringen 函数中，而是在另一个函数中：

$(document).ready(function() {

我使用本教程制作了 javascript： http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/#popup1 你得到的脚本是这样的： http://yensdesign.com/tutorials/popupjquery/popup.js

【问题讨论】：

我建议你给所有这些元素一个相同的类，然后$('.classname').click(function(){...});。
另外，我想指出这个函数是为了显示特定的 div [就像你可以在链接的 popup.js 文件中看到的那样]。每个 div 都有不同的 ID，因为内容不同，所以我不能使用该函数来搜索具有 ID 存储的每个元素* 如果我不是很清楚，我很抱歉。

标签： javascript events function for-loop

【解决方案1】：

改用[name^="value"] 选择器：

$('[id^="storing"]').click(function(){ ... });

基本上，它的意思是“查找 ID 以 'storing' 开头的所有元素。”

如果您需要更明确的内容，您可以在each() 中测试id 以应用更好的过滤。例如

$('[id^="storing"]')
  // make sure all IDs end in a number
  .each(function(i,e){
    if (/\d$/.test(e.id)) {
      // now that we only have ids that begin with storing and end in
      // a number, bind the click event
      $(e).click(function(e){ ... });
    }
  });

【讨论】：

我不确定您想通过映射实现什么...您最终会得到一个字符串数组，并且您无法将事件处理程序绑定到它们。
@FelixKling：没错，还在醒来。可能应该将逻辑放在 click 语句或 each 语句中
在这种情况下，我会改用.filter ;) 不用担心，早上好 :)

【解决方案2】：

您不会创建几十个调用同一个处理程序的事件侦听器。您在 DOM 中的更高级别创建一个侦听器，并使其仅在目标 ID 与模式匹配时才做出反应。

这就是为什么像 jQuery 这样的库教孩子们不礼貌的原因...-.-

【讨论】：

是的，你知道，我意识到我使用的脚本在这里完全不方便使用，因为它们都调用同一个处理程序......我必须制作不同的事件监听器来调用不同的处理程序来制作这项工作......我多么愚蠢......

【解决方案3】：

它可以是任意数量的东西。如果您向我们展示更多代码（例如所有 aantalstoringen 函数）将会有所帮助。

以下应该有效：

function aantalstoringen(storingen) {
    $(document).ready(function() {
        for (i=0;i<=storingen;i++) {
            $("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
        }
    });
}

也就是说，这是一种非常糟糕的方法。我会让你的每个元素也包括class="storing"。那么你就不用从服务器获取对象的数量了：

$(document).ready(function() {
    $(".storing").click(function(){ centerPopup(); loadPopup(); });
});

【讨论】：

我向你展示了所有的 aantalstoreingen 函数，它只是导入 PHP 跟踪的变量的那一行。

【解决方案4】：

首先你给 div 一个类名，比如 class="popupDiv"。然后你尝试这样的事情

$('.popupDiv').live('click', function(){
      // var id = $(this).attr('id'); By doing so you will get the current id of the div too.
      centerPopup();
      loadPopup(); 
});

【讨论】：

【解决方案5】：

正如 Brad 所说，您不必知道此类元素的数量，您只需遍历所有以 id 开头的元素即可。

所以你的代码是：

$(document).ready(function() {
    $('[id^="storing"]').click(function() {
        centerPopup();
        loadPopup();
    });
});

【讨论】：