我有一个带有一个面板的手风琴,我只想在满足某些标准时展示。面板 ID 是“产品选项”。
我有几个 javascript 函数,一个是从下拉列表中验证状态(下拉列表 id="province"),另一个是使用复选框验证年龄(复选框 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();
}