1

私は Web 開発、特に jQuery と呼ぶことができれば、非常に新しいものであり、jQuery でレンガの壁にぶつかりました。

私が持っているのは、フォーム (選択用) と一連の Paypal ボタンです。実行する必要がある機能は表示/非表示ですが、3 つのラジオ ボタンの特定の選択が選択されている場合のみです。3 つの組み合わせを選択すると、対応するペイパル ボタンが表示/非表示になります。

単一のフォーム ラジオの選択では問題なく表示/非表示を切り替えることができますが、組み合わせではできません。

私はまだ初心者なので、キャベツのコーディングを許す必要があります。コードはもっと最適化される可能性があります。ありがたいことに、トラフィックの少ないサイト/小さな市場にしか参入していません。

すべてのボタンをうまく非表示にすることができました。以下のスクリプト

<script type="text/javascript">

$(document).ready(function(){

    //Hide div w/id extra
         $("#button1,#button2,#button3,#button4,#button5,
             #button6,#button7,#button8,#button9,#button10,
             #button11, #button12, #button13, #button14,#button15,
             #button16,#button17,#button18,#button19,#button20,
              #button21,#button22,#button23,#button24,                 
              #button25,#button26,#button27").css("display","none");

});

</script>

ここにフォームhtmlがあります

    <form action="order-lamb" method="post" id="order">
   <input type="hidden" name="pack" value="whole" />
   <div class="form-item leg option left2">
      <h3> Choose from the following Leg options</h3>
      <p>Choose what leg options you would like:</p>
      <label for="leg-one-of-each"><input type="radio" name="leg" value="each" id="leg-one-of-each" />1 x Carvery and 1 x Butterfly Legs</label>
      <p class="or">OR</p>
      <label for="leg-both-carvery"><input type="radio" name="leg" value="carvery" id="leg-both-carvery" />2 x Carvery Legs</label>
      <p class="or">OR</p>
      <label for="leg-both-butterfly"><input type="radio" name="leg" value="butterfly" id="leg-both-butterfly" /> 2 x Butterfly Legs</label>
   </div>
   <div class="form-item loin option right2 ">
      <h3> Choose from the following Loin options:</h3>
      <p>Choose what loin options you would like:</p>
      <label for="loin-one-of-each"><input type="radio" name="loin" value="loin-each" id="loin-one-of-each" />1 x Nolsette Loin and 1 x Backstrap &amp; Tenderloin</label>
      <p class="or">OR</p>
      <label for="loin-both-nolsette"><input type="radio" name="loin" value="nolsette" id="loin-both-nolsette" />2 x Nolsette Loins </label>
      <p class="or">OR</p>
      <label for="loin-both-backstrap"><input type="radio" name="loin" value="backstrap-tenderloin" id="loin-both-backstrap" />2 x Backstrap &amp; Tenderloins </label>
   </div>
   <div class="cf"></div>
   <div class="form-item shoulder option left2">
      <h3>Choose from the following Shoulder options:</h3>
      <p>Choose what shoulder option you would like:</p>
      <label for="shoulder-one-of-each"><input type="radio" name="shoulder" value="shoulder-each" id="shoulder-one-of-each" /> 1 x Bone and Rolled and 1 x French Danish</label>
      <p class="or">OR</p>
      <label for="shoulder-both-bone-and-rolled"><input type="radio" name="shoulder" value="bone-and-rolled" id="shoulder-both-bone-and-rolled" />2 x Bone and Rolled</label>
      <p class="or">OR</p>
      <label for="shoulder-both-french-danish"><input type="radio" name="shoulder" value="french-danish" id="shoulder-both-french-danish" />2 x French Danish</label>
   </div>
   <div class="form-item included right2">
      <h3>You will also get:</h3>
      <p>These are included:</p>
      <span class="choice selected">2 x Fully Frenched Racks </span>
      <p class="or">AND</p>
      <span class="choice selected">1 x Coastal Spring Lamb Mince Pack </span> </span>    
      <p class="or">AND</p>
      <span class="choice selected">1 x Coastal Spring Lamb Patty Pack</span> </span>
   </div>
   <div class="clear"></div>
   <div class="align-right" />
   <div class="form-item submit">
      <p class="error">You must select an option in each category.</p>
      <input type="image" name="submit" src="images/buttons-and-logos/awaiting-payment.png" id="submit" border="0" />
      <p class="paypal">You will receive a confirmation email when your payment has been processed via paypal. <br />Price includes freight and GST.<br /></p>
   </div>
</form>
4

1 に答える 1

1

まず、これらのボタンのクラスを作成する必要があります。これにより、コードをクリーンに保ちやすくなり、労力を軽減できます。それは次のようになります。

ボタンの作成で。

<input type="button" class="hideMe">

次に、CSS ファイルでは次のようになります。

.hideMe{
     display:none;
}

または、CSS ファイルを分離したくない場合は、javascript セクションで次のようにすることもできます。

<script type="text/javascript">
$(document).ready(function(){
     //Hide div w/id extra
     $(".hideMe").css("display","none");

});
</script>

とにかくそれらの線に沿って。

次に、主な質問に答えるために、最後のボタンをいつでもチェックして、3 つすべてがチェックされていることを確認できます。

$('input:radio[name="yourRadioNameHere"]').change(function(){
       if ($(this).is(':checked') && $(radioButton2).is(':checked')  && $(radioButton2).is(':checked') ) {
         // Do whatever you need to do here
       }
});

もっとエレガントな解決策があると確信していますが、今は疲れていて、その日を終わらせようとしています笑。しかし、それはうまくいくはずです。

お役に立てれば！

編集: 3 つのチェックボックスすべてで動作させるには、3 つの if ステートメントを実行する必要があります。ただし、コードの繰り返しを節約するには、チェックを実行する関数を作成します。例えば

    function checkChecked(){
           if ($(this).is(':checked') && $(radioButton2).is(':checked')  && $(radioButton2).is(':checked') ) {
         // Do whatever you need to do here
       }
    }

次に、この関数を呼び出す 3 つの if ステートメントがあります。以下に例を示します。

       $('input:radio[name="yourRadioNameHere"]').change(function(){
       checkCheck();
});

私が言ったように、もっと洗練されたソリューションがある可能性が高いですが、これはあなたが探しているものを手に入れるでしょう. たとえば、3 つの if ステートメントを節約できるチェック ボックスが変更されているかどうかをチェックする関数が世の中にあると確信しています。ただし、そのGoogle検索はあなたに任せます:)。

追加のコードが役立つことを願っています。

于 2012-10-01T20:09:45.117 に答える