【问题标题】:How does a function use variables from another function?一个函数如何使用另一个函数的变量?
【发布时间】:2013-04-22 20:58:47
【问题描述】:

我有一个函数 addText(),它有 3 个变量 (textInput, type, rowID)。我在没有var 关键字的情况下声明了它们(以便它们可以在函数之外使用?)。我有很多这样创建的复选框:

<td><input type="checkbox" name="CB" id="monitor_'+rowID+'"/></td>

然后我就有了这个函数,需要用到这3个变量:

function monitoring(rowID, number, type) {
    var $check = $('#status_table #monitor_' + rowID);
    $('#test').append($check);
    if($check.is(':checked')) {
        $.post('/request', {
            inputText: number,
            key_pressed: type
        }).done(function (reply) {
            if(reply == "on") {
                $('#test').append("on");
            } else {
                $('#test').append("off");
            }
        });
    }
    return;
}

这里会调用这个函数:

$('#status_table #monitor_'+rowID).each(function(rowID, textInput, type){
    monitoring(rowID, textInput, type);
});

注意:inputText 是一个发布到某处的变量。

问题:

  1. 这是用变量调用选择器的正确方法吗?

    $('#status_table #monitor_'+rowID)

  2. 我是否应该在第二组代码中将变量传递两次(在选择器函数和监控函数中)?

  3. 如何正确传递变量?

  4. 选择器是否正确?或者我应该将$('#status_table #monitor_'+rowID).each(function(){}) 更改为$('#status_table tr').each(function(){})

5.补充:我应该在哪里以及如何调用函数“监控”?我把它放在 addText 下(参考下面的代码),但这没有任何意义,因为该函数只有在单击“添加”按钮时才会执行。此外,由于我的选择器是一个变量,我想确保它实际上可以对所有选中的复选框执行相同的操作。我该怎么做?

我试过了,但是当我选中复选框时,我的代码完全没有响应。

编辑:

这是我的 addText() 函数(我在这个函数中包含了函数监控,而不是在上面的另一个 jQuery 操作下):

function addText(add_type, fb_type) {
  $("#" + add_type + "Add").click(function () {
    $('.TextInput').empty();
    textInput = $("#" + fb_type + "TextInput").val();
    if(textInput.length === 0) {
      alert('please enter the fieldname');
      return;
    }
    index = $('#status_table tbody tr').last().index() + 1;
    type = $("#select-choice-1").find(":selected").text();
    rowID = type + textInput;
    var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + 
      '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' +
      textInput + '</td>' + '<td><img src="static/OffLamp-icon.png" class="image" id="off"></td>' +
      '<td><input type="checkbox" name="CB" id="monitor_' + rowID +
      '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' +
      '</tr>';
    if(alreadyExist(textInput, type)) {
      alert('Entry exists. Please enter another number.')
    } else {
      $('#status_table tr:last').after(str);
    }
    monitoring(rowID, textInput, type);
    return;
  });
}

表格的 HTML:

<table class="config" id="status_table">
  <thead>
    <tr>
      <th colspan="4" ; style="padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Output Status</th>
    </tr>
    <tr>
      <th>Index</th>
      <th>Row ID</th>
      <th>Feedback Type</th>
      <th>Feedback Number</th>
      <th>Status</th>
      <th>Monitor?</th>
      <th>Remove?</th>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
</table>

【问题讨论】:

  • 你能先完成你的问题吗?好像你的名字写错了,有些东西漏掉了。
  • 你指的是哪一个?我可以在必要时添加更多详细信息。
  • 我们可以看看表格的 HTML 吗?
  • 请阅读.each() 提供的参数。 api.jquery.com/each
  • @yvonnezoe 发布围绕.each() 调用的代码会有所帮助;如果这是在 addText() 函数中,则将其全部发布(或将其剥离到相关部分)。

标签: javascript jquery variables jquery-selectors


【解决方案1】:

有几个问题。首先,这是行不通的:

$('#status_table #monitor_'+rowID).each(function(rowID, textInput, type){
  monitoring(rowID, textInput, type);
});

传递给.each() 的函数有两个参数:indexInArrayvalueOfElement,尽管您可以随意调用它们 - 在这种情况下,rowID 将是索引,textInput 将是值元素的; type 将未定义,因为不会有任何值传递给它。

其次,在调用 ID 选择器后使用 .each() 是没有意义的。 ID 选择器最多只能选择一个元素,因为 ID 必须是唯一的。

如果rowIDtextInputtype 在您调用.each() 时在范围内,那么您可以直接调用monitoring,而根本不需要.each()。所以只是:

monitoring(rowID, textInput, type);

【讨论】:

  • 哦,谢谢指正!我在问题中添加了 addText() 函数,它具有表格的 HTML。表格的其余部分只是标题。在问题中添加了表格的骨架:)
  • “在范围内”是什么意思?你的意思是我可以放“$('selector').monitoring(rowID, textInput, type);”吗?
  • @yvonnezoe “在范围内”我的意思是当你执行代码时变量是可见的;如果您在没有使用 var 关键字的情况下声明了它们,那么它们将是全局范围的(因此始终在代码中的任何位置范围内,除非它们被另一个变量遮蔽)。你只需要monitoring(rowID, textInput, type);,因为它不是一个 jQuery 函数。
  • 但是我应该在哪里调用该函数?是否应该有一个事件来触发它,例如 .click() 或 .change()? (我不太了解 change() 的用法,如下所述:api.jquery.com/change 可以在任何会发生变化的地方使用它吗?像这种情况下,可能会勾选复选框?
【解决方案2】:

这是用变量调用选择器的正确方法吗?

选择器只是字符串。用变量组合选择器就像用变量组合字符串一样。

我是否应该在第二组代码中将变量传递两次(在选择器函数和监控函数中)?

取决于变量所在的范围。如果变量与函数在同一范围内,则函数可以访问它。如果函数在变量所在的位置之外声明,则应将其传递给它们。

如何正确传递变量?

作为调用期间的参数,例如someFunction(theFoo,theBar,theOtherBar)

选择器是否正确?或者我应该将 $('#status_table #monitor_'+rowID).each(function(){}) 更改为 $('#status_table tr').each(function(){})?

ID 在页面中应该是唯一的,并且只存在一次。因此,id 作为选择器就足够了,比如$('#monitor_[someID]')。但这仅意味着每个rowID 一次获得一个。如果你改用$('#status_table tr').each(function(){}) 会更好,然后循环tr

【讨论】:

  • 感谢您的解释! :) 我也在问题中添加了 addText() 函数。
  • 但在我的情况下,我无法确定选择器是否被正确调用,因为它没有执行函数“监控”中的操作:/ 我已经编辑了上面的代码以包含 addText 下的函数.请看一下并给我一些建议:)谢谢。
【解决方案3】:
  1. 这是用变量调用选择器的正确方法吗? $('#status_table #monitor_'+rowID)

    是的。 传递给 jQuery 的选择器只是一个字符串,因此向字符串添加一个变量就是这样做的方法。我会注意到元素 ID 是 meant to be unique(查看链接页面列表中的第 2 项)

  2. 我是否应该在第二组代码中将变量传递两次(选择器函数和监控函数)?

    如果你的函数有.each函数返回的参数,你不需要,你可以像$('#status_table #monitor_'+rowID).each(monitoring);一样。

    我会注意到,.each 回调中的参数是indexInArrayvalueOfElement,指定为here,并且没有rowIDnumbertype 作为传回的参数。

  3. 如何正确传递变量?

    不明白你的意思。如果您指的是将变量传递给函数,那么您一直在正确地做。例如。 myAwesomeFunction(myFirstVariable, mySecondVariable)

  4. 选择器是否正确?或者我应该将$('#status_table #monitor_'+rowID).each(function(){}) 更改为$('#status_table tr').each(function(){})

    这真的取决于你想要达到的目标。第一个获取 ID 为 'monitor_'+rowID 的任何元素,这些元素位于 ID 为 status_table 的元素内。第二个获取 ID 为 status_table 的元素内的所有 tr。这取决于你想要做什么。

【讨论】:

  • 感谢您的解释! :D
  • 但在我的情况下,我无法确定选择器是否被正确调用,因为它没有执行函数监控中的操作:/ 我已经编辑了上面的代码以包含 addText 下的函数。
  • 使用 Firebug、Chrome 开发者控制台,甚至 IE8+ 中的内置开发者工具,通过插入断点来检查函数的执行情况非常有用。不过老实说,我再次查看了您的代码,但我真的不明白它在做什么以及为什么要让它这样做。我不确定这对于 Stack Overflow 是否真的是一个有效的问题,因为它需要多个不同的答案。
  • 我创建了一个小提琴并在这里发布了一个新问题:stackoverflow.com/questions/16328743/…希望现在更清楚:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-09-28
  • 2018-11-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-04
  • 1970-01-01
相关资源
最近更新 更多