Если утверждение показать div, но скрыть другие divs в форме?

Question

Я ищу, чтобы создать оператор if/else, который будет показывать один div, но скрыть другие, когда выбран какой-либо параметр. Например, см. Ниже. Я попытался сделать это в первом операторе if, но не повезло и не мог найти, как добавить несколько действий в первую, если скобка. Любая помощь приветствуется.

Вот мой JS:

function showSmallJobsite(small){ 
if(small.value == 3){ 
    document.getElementById('smalljobsite').style.display = "block",; 
    document.getElementById('mediumjobsite','largejobsite').style.display = "none"; 
} 
else if(small.value == 7){ 
    document.getElementById('mediumjobsite').style.display = "block"; 
} 
else if(small.value == 8){ 
    document.getElementById('largejobsite').style.display = "block"; 
} 
else (small.value == 0){ 
    document.getElementById('largejobsite').style.display = "block"; 
} 
} 

Вот мой HTML:

<label>Number of users on site:</label> 
<select id="numberofstaff" onchange="showSmallJobsite(this)"> 
    <option value="0">--Select--</option> 
    <option id="staffnumberthree" value="3">1-3</option> 
    <option id="staffnumberseven" value="7">4-7</option> 
    <option id="staffnumbereight" value="8">8+</option> 
</select> 
<div id="smalljobsite" style="display:none;"> 
<div class="fieldcontainer"> 
    <label>Plan Table?:</label> 
     <select name="plan_table" required> 
      <option>--Select--</option> 
      <option>Yes</option> 
      <option>No</option> 
     <select> 
</div> 
<br> 
<div class="fieldcontainer"> 
    <label>E-mail:</label> 
     <select name="dslcablesmall" required> 
      <option>--Select--</option> 
      <option>DSL/Cable</option> 
      <option>LTE Only</option> 
     </select> 
</div> 
</div> 
<div id="mediumjobsite" style="display:none;"> 
<br> 
<div class="fieldcontainer"> 
    <label>Trailers?:</label> 
     <input type="number" name="phone_number" maxlength="10" required> 
</div> 
<br> 
<div class="fieldcontainer"> 
    <label>Plan Tables?:</label> 
     <input type="email" name="email" maxlength="100" required> 
</div> 
<br> 
<div class="fieldcontainer"> 
    <label>Phone System?:</label> 
     <input type="text" name="project_name" maxlength="70" required> 
</div> 
<br> 
<div class="fieldcontainer"> 
    <label>External Wifi?:</label> 
     <input type="text" name="project_number" required> 
</div> 
</div> 
<div id="largejobsite" style="display:none;"> 
<br><br> 
<div class="fieldcontainer"> 
<label>Over 25 Users?:</label><input type="number" name="phone_number"    maxlength="10" required> 
</div> 
<br><br> 
<div class="fieldcontainer"> 
    <label>Trailers or similar sized offices?:</label> 
     <input type="email" name="email" maxlength="100" required> 
</div> 
<br><br> 
<div class="fieldcontainer"> 
    <label>Plan Tables?:</label> 
     <input type="text" name="project_name" maxlength="70" required> 
</div> 
<br><br> 
<div class="fieldcontainer"> 
    <label>Second Copier?:</label> 
     <input type="text" name="project_number" required> 
</div> 
</div> 

Answer 1

Другой подход, который я хотел бы предложить, заключается в применении classname к содержащему div, который затем переключает дочерние формы.Так, например, сказать, что мы имели select, который вызвал наш JS:

<select onchange="showJobSite(this)"> 
    <option value="">Select</option> 
    <option value="0">A large job site</option> 
    <option value="8">Another large job site</option> 
    <option value="3">A small job site</option> 
    <option value="7">A medium job site</option> 
</select> 

Теперь вместо if заявления, мы принимаем значение и применять его в качестве имени класса. Поскольку числа не являются допустимыми именами классов, я добавлю его к письму j, для «job».

function showJobSite(obj){ 
    var el = document.getElementById('container'); 
    el.setAttribute('class', 'container j' + obj.value); 
}; 

Наконец, наш CSS можно настроить так, что мы прячем все, а затем показать дочерние формы, основанные на имени j + n класса. Как:

.container > div { 
    display: none; 
} 
.container.j3 #smalljobsite, 
.container.j7 #mediumjobsite, 
.container.j0 #largejobsite, 
.container.j8 #largejobsite{ 
    display: block; 
} 

Вот скрипка для демонстрации: http://jsfiddle.net/5knL7zf8/

Answer 2

getElementById требует уникального идентификатора элемента. Если вы пытаетесь быть немного более двусмысленными, попробуйте document.querySelectorAll. Возможно, вам придется немного изменить структуру html. Например, поместите все, что вы хотите показать, и спрячьте внутри div контейнера, а затем выберите все div, имеющие определенный класс, например «hideable» или что-то еще.

Скрыть все это, а затем перейти к конкретному отображению того, которое вы хотите показать.

Как так:

(function() { 
 
    'use strict'; 
 
    
 
    var flag = 2; //medium, should show small and medium, but not large. 
 
    
 
    toggleAllUsing(flag); 
 
    
 
    function toggleAllUsing(flag) { 
 
    hide('#container .hideable'); 
 
    
 
    switch(flag) { 
 
     case 1: 
 
      show('#container .show_if_small'); 
 
      break; 
 
     
 
     case 2:   
 
      show('#container .show_if_medium'); 
 
      break; 
 
     
 
     case 3:   
 
      show('#container .show_if_large'); 
 
      break;   
 
    } 
 
    } 
 

 
    function show(selector) { 
 
    var h = document.querySelectorAll(selector); 
 

 
    console.log(h); 
 
    for(var i = 0, l = h.length; i < l; i++) { 
 
     var el = h[i]; 
 
     el.style.display = 'block'; 
 
    }  
 
    } 
 

 
    
 
    function hide(selector) { 
 
    var h = document.querySelectorAll(selector); 
 

 
    for(var i = 0, l = h.length; i < l; i++) { 
 
     var el = h[i]; 
 
     el.style.display = 'none'; 
 
    }  
 
    } 
 
}());

<div id='container'> 
 
    <div class='hideable show_if_small show_if_medium show_if_large' id='small'> 
 
    I am small, I should always appear (even if you select medium or large) 
 
    </div> 
 
    <div class='hideable show_if_medium show_if_large' id='medium'> 
 
    I am medium. I should appear only when you select medium or large) 
 
    </div> 
 
    <div class='hideable show_if_large' id='large'> 
 
    I am large. I should appear only when you select large) 
 
    </div> 
 
</div>

Answer 3

Я хотел бы предложить иной подход к JavaScript, который должен помочь достичь более легко поведение, которое вы хотите, но и сделать ее менее подверженной ошибка (иногда дело с множеством операторов if) и легче читать.

Если критерием является то, что только один DIV должен быть показан в то время, и все остальные скрыты, то первым делом в JavaScript, чтобы скрыть все дивы сразу:

// JS 
function showSmallJobsite(small){ 
    var jobsites = document.getElementsByClassName('jobsite'); 
    for(var i = 0; i < jobsites.length; i++) { 
     jobsites[i].style.display = 'none'; 
    } 
} 

// HTML 
<div id="smalljobsite" class="jobsite"> 
... 
<div id="mediumjobsite" class="jobsite"> 
... 
<div id="largejobsite" class="jobsite"> 
... 

Конечной задачей было бы показать ту, которую интересует пользователь. Правильно ли говорить, что есть прямое сопоставление между «small.value» и конкретным сайтом работы?

Предлагаемый подход:

function showSmallJobsite(small){ 
    ... 

    var map = { 
     3: 'smalljobsite', 
     7: 'mediumjobsite', 
     8: 'largejobsite', 
     0: 'largejobsite' 
    } 
    var show = document.getElementById(map[small.value]); 
    show.style.display = 'block'; 
} 

В качестве альтернативы:

// HTML 
<div id="smalljobsite" class="jobsite smallvalue-3"> 
... 
<div id="mediumjobsite" class="jobsite smallvalue-7"> 
... 
<div id="largejobsite" class="jobsite smallvalue-8 smallvalue-0"> 
... 

// JS 
function showSmallJobsite(small){ 
    ... 

    var show = document.getElementsByClassName('smallvalue-' + small.value); 
    show.style.display = 'block'; 
} 

Глядя на более широкое приложение, которое я мог бы иметь другую альтернативу, которая является более оптимальным, может быть, но из информации, предоставленной я хотел бы рассмотреть одно из выше улучшения.

С меньшими утверждениями я надеюсь, что вы найдете достижение желаемой функциональности проще и вероятность ошибок и неожиданного поведения меньше.

Извините, если вы не считаете это полезным.

Примечание: ошибка в исходном коде в конце строки 3: ... "block",;