javascript - 为什么取消隐藏元素会失败？

Question

我的 Meteor 应用程序使用 Template.dynamic 将之前的模板替换为下一个。我在“主”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

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

Answer 1

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

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