为什么这种元素的隐藏失败？答案

【问题标题】：Why does this unhiding of elements fail?为什么这种元素的隐藏失败？
【发布时间】：2015-09-10 23:41:11
【问题描述】：

我的 Meteor 应用使用 Template.dynamic 将之前的 Template 替换为下一个。我在“主”html文件中这样设置：

<div class="container">
   {{> postTravelWizard}}
</div>

</body>

<template name="postTravelWizard">
    {{> Template.dynamic template=getStepTemplate}}
    <button type="button" name="nextStep" id="nextStep">Next</button>
</template>

...这里有一些相关的 JavaScript diesbzg.:

   Session.setDefault('stepNum', 1);

   Template.postTravelWizard.helpers({
        getStepTemplate: function () {
            var step = Session.get('stepNum');
            switch (step) {
                case 5:
                  return 'tblFundOrgAccountActivityAmount';
                  break;
                case 4:
                  return 'tblExpenseDescription';
                  break;
                case 3:
                    return 'tblPayments';
                    break;
                case 2:
                    return 'tblTravelerInfo2';
                    break;
                default:
                    return 'tblTravelerInfo';
                    break;
            }
        }
    }); // Template.postTravelWizard.helpers

这一切都很好——但不是非常很好，因为我隐藏的HTMLTable“列”是这样的：

<template name="tblExpenseDescription">
  <button type="button" name="addDate" id="addDate">Add another Date</button>
  <br />
  <table class="maintable" name="tblExpDesc" id="tblExpDesc" border="1">
    <tr>
        <td class="centertextnowrap"><strong>Description of Expense</strong></td>
        <td class="centertext"><label>Date 1: </label><input type="date" id="date1" name="date1"/></td>
        <td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>
        <td class="centertext hide"><label>Date 3: </label><input type="date" id="date3" name="date3"/></td>
        <td class="centertext hide"><label>Date 4: </label><input type="date" id="date4" name="date4"/></td>
        <td class="centertext hide"><label>Date 5: </label><input type="date" id="date5" name="date5"/></td>
        <td class="centertext hide"><label>Date 6: </label><input type="date" id="date6" name="date6"/></td>
        <td class="skybluebackground centertext"><label><strong>Total Expenses</strong></label></td>
        <td colspan="4" class="nobordercell centertext"><label>Comments</label></td>
    </tr>
. . .
</template>

...（通过为某些 HTML 元素分配 CSS“隐藏”类）在单击“添加另一个日期”按钮时不会取消隐藏。那个类是：

.hide {
  visibility: hidden;
  display: none;
}

第一次单击“添加另一个日期”按钮时，它应该显示/取消隐藏/显示日期 2 的“列”；如果用户再次单击它，它应该显示日期 3 的“列”等。代码如下：

   Session.setDefault('nextDate', 1);
   . . .
   Template.postTravelWizard.events({
    'click #addDate': function(event){
       var nextD8 = Session.get('nextDate');
       nextD8 = ++nextD8;
       Session.set('nextDate', nextD8);

       if (nextD8 == 2) {
          $("#date2").removeClass("hide");
          $("#airfare2").removeClass("hide");
          $("#pcm2").removeClass("hide");
          $("#reimbursemlg2").removeClass("hide");
          $("#rcei2").removeClass("hide");
          $("#ot2").removeClass("hide");
          $("#parktolls2").removeClass("hide");
          $("#confreg2").removeClass("hide");
          $("#lodging2").removeClass("hide");
          $("#mealsandI2").removeClass("hide");
          $("#foreignanddomestic2").removeClass("hide");
          $("#miscandenter2").removeClass("hide");
          $("#totals2").removeClass("hide");
       } // If/when this works, add code for the others, or figure out a less brute-forcish way to accomplish the same thing
    } // 'click #addDate': function(event){
}); // Template.postTravelWizard.events

没有错误消息，但删除这些元素上的“隐藏”类没有任何作用。为什么不呢？

【问题讨论】：

使用 chrome 开发工具或 firebug 来检查元素。确保真正删除了隐藏类。是吗？如果是这样，是否有任何显示：无；可见性：隐藏等正在从其他地方应用？

标签： javascript jquery html css meteor

【解决方案1】：

看起来“隐藏”类已应用于 td 元素，但在您的 Js 文件中，您正在从 #date2 中删除该类，这是一个输入。

改为将 date2 的 ID 应用于 td 元素，您的代码应该可以工作。

【讨论】：

【解决方案2】：

为了扩展 bluejaybr 接受的答案，这是我所做的：

0) 更改了这种 HTML：

<td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>

...到这个：

<td class="centertext hide" id="tdDate2"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>

（在 td 元素中添加了一个“tdBla”id）

1) 更改了 Javascript：

$("#Date2").removeClass("hide");

...到这个：

$("#tdDate2").removeClass("hide");

【讨论】：