Question

这仍然是关于动态父和动态子，我的问题是在关键功能时自动进行计算。

找到所有脚本

我也已经在每个div和输入上添加了类，以使其更好地作为建议。

<div id="divexpeses" **class="expenses"** style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Expenses</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtpetrol[]" class="field1" value="90" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtticket[]" class="field1" value="90" />
      </li>
    </ul>
  </div>

现在。让我展示我的功能，实际上我需要自动计算，并应在父div上显示： -

$(".purchase-item").keyup('.field1', function (index, value) {
                alert("hai");
                // get current index position of the div
                var itemIndex = $(this).parents('expenses').children('.field1').index($(this).parent('.field1'));
                alert(itemIndex);
            });

你必须记住这是动态的父母和动态孩子！

每次我在txtpetrol [] txtticket []上插入值时，首先确定哪个父索引和div费用。然后它应该如下所示： -

Expenses       Amount   -- to -->     Expenses      Amount: 180

知道怎么克服这个问题吗？我需要帮助。

感谢提前阅读和回复我的问题。

Answer 1

document中

id元素应该是唯一的。从.expenses元素中删除重复的.index()，使用事件委派和.expenses来确定哪个keyup元素触发$(document).on("keyup", ".expenses", function(event) { console.log(".expenses index:", $(this).index(".expenses") , "event target:", event.target); });事件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expenses" style="margin-left:25px;background-color:antiquewhite">
  <label style="float:left; margin-right:100px;">Expenses</label>
  <label>Amount</label>
  <ul>
    <li>
      Advance
      <input type="text" name="txtpetrol[]" class="field1" value="90" />
    </li>
    <li>
      Pay Trip
      <input type="text" name="txtticket[]" class="field1" value="90" />
    </li>
  </ul>
</div>
<div class="expenses" style="margin-left:25px;background-color:antiquewhite">
  <label style="float:left; margin-right:100px;">Expenses</label>
  <label>Amount</label>
  <ul>
    <li>
      Advance
      <input type="text" name="txtpetrol[]" class="field1" value="90" />
    </li>
    <li>
      Pay Trip
      <input type="text" name="txtticket[]" class="field1" value="90" />
    </li>
  </ul>
</div>
<div class="expenses" style="margin-left:25px;background-color:antiquewhite">
  <label style="float:left; margin-right:100px;">Expenses</label>
  <label>Amount</label>
  <ul>
    <li>
      Advance
      <input type="text" name="txtpetrol[]" class="field1" value="90" />
    </li>
    <li>
      Pay Trip
      <input type="text" name="txtticket[]" class="field1" value="90" />
    </li>
  </ul>
</div>

ps -p $PID > /dev/null 2>&1;   echo $?

Answer 2

首先，我要感谢@ guest271314在哪里展示代码，我很感激。我试图采用它，但它不适合我的情况，我一直认为它应该比这简单。

在我睡觉之前，我只是尝试下面的语法，我得到了我想要的东西： -

msgContainer.addEventListener("click", e => {
    e.preventDefault()
    let seconds = e.target.getAttribute("data-seek") ||
    e.target.parentNode.getAttribute("data-seek")
    if (!seconds) { return }

    Player.seekTo(120, true)//120 seconds
})

我不确定为什么它可行，总结基于div的所有输入并显示正确的结果，因为我对jquery函数非常新。

动态父文件框上的KeyUp时自动计算动态父级并显示结果

2 个答案: