0

我创建了一个价格表。它有可折叠的字段集,我想在定价摘要中显示。第一个字段集出现,但其余的不会。我错过了什么吗?还是我需要删除代码中的某些内容?请帮忙。网址是:www.azaservice.com/mscalc.html 谢谢!

4

1 回答 1

0

您的其他fieldset元素没有显示出来,因为在您的元素中找不到它们form.jquery-order-form。页面底部的脚本会在此表单元素上初始化 jPrice 插件。将您的</form>标签移动到fieldset元素的末尾,我敢打赌它会开始工作。本质上,它应该看起来像这样,其中所有fieldset元素都是元素的子form元素。

<form class="jquery-order-form">
   <div class="options">
    <fieldset>...</fieldset>
    <fieldset>...</fieldset>
    <fieldset>...</fieldset>
    <fieldset>...</fieldset>
   </div>
   <div class="sidebar">...</div>
</form>

更新:您的问题是由您的标记结构引起的。我已经更新了上面的示例,让您了解它“应该”的外观。我没有包含您所有的原始标记,但是这里的内容应该可以帮助您实现目标。

您的完整代码可能如下所示:

<div id="main">
  <h1>AzaService Managed Services Calculator</h1>
  <form id="jquery-order-form" class="jof form-horizontal right" action="submit.php" method="post" enctype="multipart/form-data">
    <div class="options" style="width: 719px;">
      <fieldset id="fieldset1" class="coolfieldset collapsed">
        <legend>Windows Servers</legend>
        <div class="sub-option o-1 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="400" value="8x5" name="f_1">
                <label for="f_1"> 8 x 5</label>
                <span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$400.00 </span></span></li>
              <li>
                <input type="radio" checked="checked" data-cost="480" value="24x7" name="f_1">
                <label for="f_1"> 24 x 7</label>
                <span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$480.00 </span></span></li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-2 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="3" value="Antivirus" name="f_2[]">
                <label for="f_2[]"> Antivirus</label>
                <span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$3.00 </span></span></li>
              <li>
                <input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_2[]">
                <label for="f_2[]"> Onsite</label>
                <span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$50.00 </span></span></li>
              <li>
                <input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_2[]">
                <label for="f_2[]"> Backup</label>
                <span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$20.00 </span></span></li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Windows Servers: </strong>
        <input type="number" name="q_1" id="q_1" value="1" data-quantity="f_1,f_2[]">
      </label>
      <fieldset id="fieldset2" class="coolfieldset collapsed">
        <legend>Linux Servers</legend>
        <div class="sub-option o-3 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="400" value="8x5" name="f_3[]">
                <label for="f_3[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="480" value="24x7" name="f_3[]">
                <label for="f_3[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-4 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="3" value="Antivirus" name="f_4[]">
                <label for="f_4[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_4[]">
                <label for="f_4[]"> Onsite</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_4[]">
                <label for="f_4[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Linux Servers: </strong>
        <input type="number" name="q_2" id="q_2" value="2" data-quantity="f_3[],f_4[]">
      </label>
      <fieldset id="fieldset3" class="coolfieldset collapsed">
        <legend>Unix Servers</legend>
        <div class="sub-option o-5 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="400" value="8x5" name="f_5[]">
                <label for="f_5[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="480" value="24x7" name="f_5[]">
                <label for="f_5[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-6 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="3" value="Antivirus" name="f_6[]">
                <label for="f_6[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_6[]">
                <label for="f_6[]"> Onsite</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_6[]">
                <label for="f_6[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Unix Servers: </strong>
        <input type="number" name="q_3" id="q_3" value="3" data-quantity="f_5[],f_6[]">
      </label>
      <fieldset id="fieldset4" class="coolfieldset collapsed">
        <legend>Windows Workstations</legend>
        <div class="sub-option o-7 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="55" value="8x5" name="f_7[]">
                <label for="f_7[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="66" value="24x7" name="f_7[]">
                <label for="f_7[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-8 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="2" value="Antivirus" name="f_8[]">
                <label for="f_8[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_8[]">
                <label for="f_8[]"> Onsite</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_8[]">
                <label for="f_8[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Windows Workstations: </strong>
        <input type="number" name="q_4" id="q_4" value="4" data-quantity="f_7[],f_8[]">
      </label>
      <fieldset id="fieldset5" class="coolfieldset collapsed">
        <legend>Linux Workstations</legend>
        <div class="sub-option o-9 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="55" value="8x5" name="f_9[]">
                <label for="f_9[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="66" value="24x7" name="f_9[]">
                <label for="f_9[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-10 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="2" value="Antivirus" name="f_10[]">
                <label for="f_10[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_10[]">
                <label for="f_10[]"> Onsite</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_10[]">
                <label for="f_10[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Linux Workstations: </strong>
        <input type="number" name="q_5" id="q_5" value="5" data-quantity="f_9[],f_10[]">
      </label>
      <fieldset id="fieldset6" class="coolfieldset collapsed">
        <legend>Unix Workstations</legend>
        <div class="sub-option o-11 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="55" value="8x5" name="f_11[]">
                <label for="f_11[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="66" value="24x7" name="f_11[]">
                <label for="f_11[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-12 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="2" value="Antivirus" name="f_12[]">
                <label for="f_12[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_12[]">
                <label for="f_12[]"> Onsite</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_12[]">
                <label for="f_12[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Unix Workstations: </strong>
        <input type="number" name="q_6" id="q_6" value="6" data-quantity="f_11[],f_12[]">
      </label>
      <fieldset id="fieldset7" class="coolfieldset collapsed">
        <legend>Mobile Units</legend>
        <div class="sub-option o-13 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="40" value="8x5" name="f_13[]">
                <label for="f_13[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="48" value="24x7" name="f_13[]">
                <label for="f_13[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-14 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="50" value="Antivirus" name="f_14[]">
                <label for="f_14[]"> Antivirus</label>
              </li>
              <li>
                <input type="checkbox" checked="checked" data-cost="50" value="Backup" name="f_14[]">
                <label for="f_14[]"> Backup</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Mobile Units: </strong>
        <input type="number" name="q_7" id="q_7" value="7" data-quantity="f_13[],f_14[]">
      </label>
      <fieldset id="fieldset8" class="coolfieldset collapsed">
        <legend>Networks</legend>
        <div class="sub-option o-15 o-radio" data-type="radio" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Service Level: </strong></p>
            <ul>
              <li>
                <input type="radio" data-cost="30" value="8x5" name="f_15[]">
                <label for="f_15[]"> 8 x 5</label>
              </li>
              <li>
                <input type="radio" checked="checked" data-cost="36" value="24x7" name="f_15[]">
                <label for="f_15[]"> 24 x 7</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-option o-10 o-checkbox" data-type="checkbox" style="display: none;">
          <div class="well" style="display: none;">
            <p><strong>Services: </strong></p>
            <ul>
              <li>
                <input type="checkbox" data-cost="50" value="Onsite" name="f_16[]">
                <label for="f_16[]"> Onsite</label>
              </li>
            </ul>
          </div>
        </div>
      </fieldset>
      <label><strong>Number of Networks: </strong>
        <input type="number" name="q_8" id="q_8" value="8" data-quantity="f_15[],f_16[]">
      </label>
      <p>
        <input class="submit btn btn-primary btn-large" type="submit" value="Send it Off!">
      </p>
    </div>
    <div class="sidebar" style="top: 0px; left: 0px;">
      <div class="total well">
        <h3>Total: <span class="price">$4939.00 </span></h3>
        <input type="hidden" id="total-cost" name="total-cost" value="4939">
      </div>
      <div class="summary well">
        <h3>Summary:</h3>
        <div class="itemized-summary">
          <div class="line-item">
            <p><strong>Windows Server Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Windows Server Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Windows Servers: </strong>1</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Linux Server Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Linux Server Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Linux Servers: </strong>2</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Unix Server Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Unix Server Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Unix Servers: </strong>2</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Windows Workstation Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Windows Workstation Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Windows Workstations: </strong>4</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Linux Workstation Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Linux Workstation Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Linux Workstations: </strong>5</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Unix Workstation Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Unix Workstation Services: </strong></p>
            <ul>
              <li>Onsite</li>
              <li>Backup</li>
            </ul>
            <p></p>
          </div>
          <div class="quantity">
            <p><strong>Number of Unix Workstations: </strong>6</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Mobile Service Level: </strong>24x7</p>
          </div>
          <div class="line-item">
            <p><strong>Mobile Services: </strong>Backup</p>
          </div>
          <div class="quantity">
            <p><strong>Number of Mobile Units: </strong>7</p>
          </div>
          <hr>
          <div class="line-item">
            <p><strong>Network Service Level: </strong>24x7</p>
          </div>
          <div class="quantity">
            <p><strong>Number of Networks: </strong>8</p>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
于 2013-11-05T17:10:44.973 回答