特定の基準が満たされた場合にのみ表示したい 1 つのパネルを含むアコーディオンがあります。パネル ID は「product-options」です。
私はいくつかの JavaScript 関数を持っています。1 つはドロップダウンから州を確認すること (dropdown id="province") で、もう 1 つはチェックボックス (checkbox id="age_verification") で年齢を確認することです。アコーディオン パネル "product-options" は、ヘッダー id="BuyThis" でアクティブ化されます。
私が望むのは、状態がリストと一致する場合にのみパネル「製品オプション」を表示することです。
これが私のスクリプトです。
<script>
// Validates State is in list of allowed for wine shipping...
function validateState() {
// Confirms province is allowed for wine shipping
var states = ["Alaska", "Arizona", "California", "Colorado", ""];
if ($.inArray($("#province").val(), states) <0) {
alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item.");
return false;
}
alert("Item Available! Please choose your options.");
return true;
}
// Validates age verification is checked...
function validateAge() {
if (!$('#age_verification').is(':checked')) {
alert("Please verify you are 21 years of age or older.");
return false;
}
return true;
}
</script>
対応する HTML:
<h3 id="BuyThis" onclick="return validateState();"><button class="Button buyThisBtn"><i class="icon-shopping-cart"></i> Buy This!</button></h3>
<div class="ProductContainer" id="product-options">
<form>
[BODY OF ACCORDION PANEL WITH A BUNCH OF IRRELEVANT CODE......]
<button id="addtocart" type="submit" class="Button" onclick="validateAge(); return validateState();"><i class="icon-shopping-cart"></i> ADD TO CART</button>
</form>
</div>
私は無駄に以下を組み込んでみました:
$(function () {
$("#buyThis").change(function () {
if ($.inArray($("#province").val(), states) <0) {
alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item.");
$("product-options").hide();
}
$("product-options").show();
}