料金表を作成しました。価格概要に表示したい折りたたみ可能なフィールドセットがあります。最初のフィールドセットは表示されますが、残りは表示されません。何か不足していますか？または、コード内の何かを削除する必要がありますか? 助けてください。サイトは次のとおりです: www.azaservice.com/mscalc.html ありがとうございます。
質問する
158 次
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 に答える