0

可能重复：
通过克隆的列表行调用相同的函数

我正在尝试进行简单的计算。

我有以下运行：

http://jsfiddle.net/vSyK6/41/

基本上，它现在的工作方式是这样的：当您在下拉列表中选择一个选项时，它将根据所选选项显示内容。然后，当您再次选择相同的选项时，它会添加，基本上是克隆同一行。Now, when the second option is selected "Option2" it will display an empty textbox. 当您输入一个数字时，它将或应该调用我们进行基本计算的函数。该函数已在脚本中。

但是，当我们有两个空文本框时，它应该调用相同的计算函数，但分别计算并将其放在不同的 div 中。我们显示金额的 div# 称为“金额”

基本上，它应该像这样工作：

First Empty textbox -> 100 -> 100 * 22.38 = display result in div#1
Second Empty textbox -> 230 -> 230 * 22.38 = display in div#2

关于如何做到这一点的任何想法？

4

2 回答 2

0

克隆元素时，也会克隆 id。为克隆的元素创建一个新 ID 是最佳实践，这也有助于实现您想要的。name 属性也是如此。

通过对您的代码http://jsfiddle.net/dNQVQ/3/进行一些修改，我能够得到您想要的东西。首先让我说，这可能不是理想的方式，但它是一个开始。就像我之前说的，关键是为克隆的元素设置唯一的 id。我在此示例中所做的是将索引用作列表元素 id 的一部分，该列表元素 id 使用“数量”div 中的匹配索引进行克隆。这样，当更新输入时，检索索引，然后用于更新适当的 div。此外，我将执行计算和更新的函数移动到 settimeout 调用中的匿名函数。这使得在函数调用中使用对更新输入的引用变得容易。

于 2012-10-14T02:44:32.013 回答
0

在这里加入聚会很晚:)这是一个弗农：http: //jsfiddle.net/KVPwm/

另外，如果它的任务很简单，请放置一个任务homework标签！

SO社区周围的人都是很棒的人，所以说实话，伙计们会帮助人的！

  • 使用.on代替live- 推荐。即如果热衷于阅读此内容，请升级您的 JQ 源代码 - jQuery live 方法有什么问题？
  • 你有 2 个document.ready功能，我也为你链接了一些东西。
  • 也可以考虑使用isNan检查。
  • 休息一下，您可以阅读代码并尝试一下以使其更简洁。
  • 我添加了 2 divs并使用该id数字相应地填充内容。

这应该适合原因:)

代码

$("document").ready(function() {
    /////////////////////////////////CALUCATIONS/////////////////////////////////
    //setup before functions
    var typingTimer; //timer identifier
    var doneTypingInterval = 0; //time in ms, 5 second for example
    $('input[name=Input2], input[name=Input1]').live('keyup', function() {
        var str = $(this).prop("id");
        var pattern = /[0-9]+/g;
        var matches = str.match(pattern);

        amount = parseFloat($(this).val()) * 22.38;
        typingTimer = setTimeout(doneTyping(matches), doneTypingInterval);
    });

    $('#Input2').keydown(function() {
        clearTimeout(typingTimer);
    });

    function doneTyping(matches) {
        $('#amount'+matches).text(amount.toFixed(2) + " lbs");
    }
    $("#List-Option1,#List-Option2").hide();

    $('#category').change(function() {
        var str = $('#category').val();
        if (str == 'Option1') {
            var option1 = $("#List-Option1:first").clone().show();
            $('#box li:last').after(option1);
        }

        if (str == 'Option2') {
            var option2 = $("#List-Option2:first").clone().show();
            $('#box li:last').after(option2);

        }

    });
});​
于 2012-10-14T02:52:24.737 回答