Скрыть / Показать Аккордеон на основе функций JavaScript

0

У меня есть аккордеон с одной панелью, которую я хотел бы показать, только если выполнены определенные критерии. Идентификатор панели - это "параметры продукта".

У меня есть пара 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>&nbsp;&nbsp;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();             
}
  • 0
    Ваша функция validateState завершена? Это не имеет обратного истины; для альтернативных случаев.
  • 0
    @ veritasetratio ~ Извините, у меня есть возвращенное значение true, просто случайно его пропустили. Я отредактировал пост с пропущенными строками. Спасибо!
Теги:
accordion

1 ответ

2
Лучший ответ

Попробуйте вот так:

<h3 id="BuyThis" ><button class="Button buyThisBtn"><i class="icon-shopping-cart"></i>&nbsp;&nbsp;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>&nbsp;&nbsp;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;
}
  • 0
    ~ Привет и спасибо за ваш пост! Очень ценю вашу помощь, но это не работает. Есть другие идеи? Спасибо
  • 0
    @ Sandcar-Хочу упомянуть, что '#' для id отсутствует в строках $ ("product-options"). Hide (); и $ ("product-options"). show () ;. Тем не менее, даже после того, как это было добавлено, по-прежнему не работает.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню