У меня есть аккордеон с одной панелью, которую я хотел бы показать, только если выполнены определенные критерии. Идентификатор панели - это "параметры продукта".
У меня есть пара javascript-функций, одна из которых - проверка состояний из раскрывающегося списка (dropdown id = "province"), а другая - проверка возраста с помощью флажка (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();
}
Попробуйте вот так:
<h3 id="BuyThis" ><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").click(function () {
if(validateState()){
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();
}
}
Изменить 2
Пожалуйста, ознакомьтесь с этой скриптой с некоторыми изменениями в вашем коде:
Пожалуйста, не используйте метод $.inArray неправильно. В событии click, а также в функции validateState, я думаю.
Я также внес некоторые изменения в разметку html
Редактировать 3
Пожалуйста, см. Эту скрипку с рабочим примером: Я надеюсь, что это может помочь вам сейчас.
HTML
<select id="province">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">Colorado</option>
</select>
<button id="test" >Teste</button>
<h3 id="BuyThis" style="background:red;" >
<button id="buyThisButton" 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>
Javascript
$( document ).ready(function() {
// Handler for .ready() called.
$("#BuyThis").click(function() {
//alert("test");
if(validateState()){
// if state is valid do this
}else{
// do that
}
});
}); // end of dom ready
// Validates State is in list of allowed for wine shipping...
function validateState() {
// Confirms province is allowed for wine shipping
var states = ["Alaska", "Arizona"];
if ($.inArray($("#province").val(), states) >= 0) {
alert("Oh no! Shipping items containing alcohol to this state is prohibited by law. Please choose another item.");
//$("#BuyThis").unbind("click");
$("#product-options").slideUp();
return false;
}
alert("Item Available! Please choose your options.");
$("#product-options").slideDown();
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;
}