如果選擇了特定選項並單擊按鈕，如何觸發Jquery幻燈片效果？

Question

我有一個簡單的表單，包含下拉列表，輸入郵政編碼字段和按鈕。 我希望我創建的Jquery幻燈片效果僅在1.選擇特定時執行，2。輸入郵政編碼時3.單擊按鈕提交時。 該按鈕僅在我在頁面上執行其他JS后才起作用，我無法使if語句正常工作。 請幫忙。

這些效果是正常的，並做我想要的。 我只需要在滿足上述條件時觸發它們：

$( "#slide-2" ).show("slide", {direction: "right"}, 500);
$( "#slide-1" ).hide("slide", {direction: "left"}, 500);

<form class="product-form">
    <select id="product-dropdown">
<option value="">Select a Product</option>
      <option value="auto" selected>Auto Insurance</option>
<option value="autoresidence" id="bundled-selected">Auto + Residence (save more!)</option>
      <option value="home">Home Insurance</option>
      <option value="home-condo">Condo Insurance</option>
      <option value="renters">Renters Insurance</option>
    </select>

    <input type="text" class="quote-zip" id="gaq-zip-code" name="gaqZipCode" placeholder="Enter Zip Code" maxlength="5">

      <button href="#" id="submit-gaq" class="quote-submit">Get a Quote</button>
</form>
 <script type="text/javascript">
   $( ".quote-submit" ).click(function() {
   $( "#slide-2" ).show("slide", {direction: "right"}, 500);
   $( "#slide-1" ).hide("slide", {direction: "left"}, 500);
    });
    </script>

Answer 1

我建議您按照已有的模式觸發最少的事件 - 點擊按鈕，驗證其他標准。

$(".quote-submit").click(function () {
    if ($("#product-dropdown").val() == "Specific Text" && $("gaq-zip-code").val().length == 5) {
        $("#slide-2").show("slide", { direction: "right" }, 500);
        $("#slide-1").hide("slide", { direction: "left" }, 500);
    }
});

Answer 2

根據您的要求，還添加了禁用按鈕的功能。 你不希望人們想知道為什么表單沒有提交，即使它應該是顯而易見的。

if ($('#gaq-zip-code').val().length == 0 && ($("#product-dropdown").val() == "Home Insurance")) {
   $('submit-gaq').removeAttr('disabled');
   $( ".quote-submit" ).click(function() {
   $( "#slide-2" ).show("slide", {direction: "right"}, 500);
   $( "#slide-1" ).hide("slide", {direction: "left"}, 500);
    });
}
else{
$('submit-gaq').attr('disabled','disabled'); 
}