Question

这是快照链接：http://postimg.org/image/ul84henil/

我需要什么：

我希望预算中的 dblclick 和费用 {{分别隐藏<td>并仅在 ITS OWN p.budgetVal中显示form。
此外，还可以重置对方/对应的<td>以便：
1. 再次显示<td>（如果已隐藏），
2. 隐藏了p.budgetVal（如果已显示）

我的问题/现状：

form班级.budget工作正常但费用 dblclick上的dblclick事件会导致预算表格单元格的表格同时打开/同时打开。

以下是我的代码：

<td>

这是我的jquery代码：

  <tr class="nofirst">
    <td title="<?php
                 echo $project_store_row['Name'].
                      "[".$project_store_row['Name'].
                      "]";
               ?>"
    >
      <div class="bigtd">
        <a href="https://app.a.com
                   <?php  ?>
                   /0/
                   <?php
                     echo $project_store_row['Project_ID'];
                   ?>"
           target="_blank"
           style="color:#282828"><?php echo $project_store_row['Name']; ?>
        </a>
      </div>
    </td>
    <td class="Budget" title="budget">
      <p class="budgetVal">
        <?php echo $project_store_row['Budget']; ?>
      </p>
      <form style="display:none">
        <input type="text" class="budget_val" style="width:30px">
        <input type="button"
               id="<?php echo $project_store_row['Project_ID'];?>"
               class="btn" value="Ok"
        >
      </form>
    </td>
    <td class="Expense">
      <p class="budgetVal">
        <?php echo $project_store_row['Expense']; ?>
      </p>
      <form style="display:none">
        <input type="text" class="budget_val" style="width:30px">
        <input type="button"
               id="<?php echo $project_store_row['Project_ID'];?>"
               class="btn" value="Ok"
        >
      </form>
    </td>

Answer 1

您正在使用jQuery，因此请使用preventDefault（）和toggle（）函数（http://api.jquery.com/toggle/）。

<script>
$(document).ready(function() {
    $('#form1').click(function(e) {
        $(e).preventDefault();
        $('#form1').toggle();
        $('#form2').toggle();
    });
});
</script>

Answer 2

您的遍历方式错误，请尝试这种方式

                $(".Expense").dblclick(function(){
                    alert("hello");
                    $('.budgetVal').hide() // hide all budgetVal element which is open
                    //$(this).parent().find('.budgetVal').hide();
                    //$(this).parent().find('form').show('slow'); // here your referring to `.budget` classes form 
                    $('form').hide('slow'); //this will close all open forms
                    $(this).find('form').show('slow'); // this will show the form inside `.expense` class element
                    $(this).parent().find('.Budget').hide();

                });

快乐编码：）

Answer 3

您的问题/错误：

预算和费用的两个 dblclick事件处理程序，引用其相应的父项
问题是：
- 各自的父母是相同父母，即表格行<tr class="nofirst">。
- 然后您尝试 .find() budgetVal 和 .hide() 它（这可能适用于两种情况）
- 然后你试图找到（）通用形式“child”并显示它==＆gt;这是你的问题：
  - 你知道，因为在这两种情况下，你都要去同一个父母，
  - 然后这句话：
    
    $(this).parent().find('form').show('slow');
    
    将始终显示“预算”表单，因为它是 { { 找到的子 { {1}} 即可。

。

将（S）：

您有 2个选项：

将DOM导航到第一个（用于预算）和第二个（用于费用） <tr>在jQuery中使用正确的选择器，如下所示：

form

和

parent.find('form:first')

修改您的HTML以包含parent.find('form:second')标记的id属性，如下所示，并修改您的jQuery以明确地找到它们 OR ，因为它们都在相同的<form>，您不要根本不需要去父。

<强> HTML

<td>

<强>的jQuery

...再次，您可以使用其显式ID引用<tr class="nofirst"> <td title="<?php echo $project_store_row['Name']. "[".$project_store_row['Name']. "]"; ?>" > <div class="bigtd"> <a href="https://app.a.com <?php ?> /0/ <?php echo $project_store_row['Project_ID']; ?>" target="_blank" style="color:#282828"><?php echo $project_store_row['Name']; ?> </a> </div> </td> <td class="Budget" title="budget"> <p class="budgetVal"> <?php echo $project_store_row['Budget']; ?> </p> <form id="#budget_form" style="display:none"> <input type="text" class="budget_val" style="width:30px"> <input type="button" id="<?php echo $project_store_row['Project_ID'];?>" class="btn" value="Ok" > </form> </td> <td class="Expense"> <p class="budgetVal"> <?php echo $project_store_row['Expense']; ?> </p> <form id="#expense_form" style="display:none"> <input type="text" class="budget_val" style="width:30px"> <input type="button" id="<?php echo $project_store_row['Project_ID'];?>" class="btn" value="Ok" > </form> </td>，例如form 或，因为它们都在同一个$('form#budget_form')，您不要需要转到父所有：

<td>

注意，我还在下面添加了一些代码来重置其他$(".Budget").dblclick(function(){ $(this).find('.budgetVal').hide(); $(this).find('form').show('slow'); // reset the other TD when you click in this one. $(".Expense").find('.budgetVal').show(); $(".Expense").find('form').hide(); }); $(".Expense").dblclick(function(){ $(this).find('.budgetVal').hide(); $(this).find('form').show('slow'); // reset the other TD when you click in this one. $(".Budget").find('.budgetVal').show(); $(".Budget").find('form').hide(); });以重新显示，并分别重新隐藏值和表单。

进一步，您可以使用jQuery <td> 来达到同样的效果。

如何停止同时点击提交按钮

我需要什么：

我的问题/现状：

3 个答案:

您的问题/错误：

将（S）：