如果聲明顯示div但隱藏其他div形式？

Question

我正在尋找創建一個if / else語句，該語句將顯示一個div，但在選擇某個選項時隱藏其他div。 例如，見下文。 我在第一個if語句中嘗試過它，但是沒有運氣，而且似乎找不到在第一個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

getElementById需要元素的唯一ID。 如果您想變得更加模棱兩可，請嘗試document.querySelectorAll 。 您可能需要重新構造html。 例如，將您希望顯示和隱藏的所有內容放在容器div中，然后選擇所有具有特定類（例如“ hideable”或諸如此類）的div。

隱藏所有這些內容，然后進入特定頁面以顯示您想要顯示的內容。

像這樣：

 (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 2

我想為JavaScript建議一種不同的方法，該方法應該有助於更輕松地實現所需的行為，同時也使其不易出錯（有時帶有許多if語句），並且更易於閱讀。

如果條件是一次僅顯示一個div，而所有其他div隱藏，則JavaScript中的首要工作是立即隱藏所有div：

// 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';
}

從更廣泛的應用程序的角度來看，我可能還有另一種可能更理想的選擇，但從給出的信息中，我會認為上述兩種方法都有改進。

如果希望使用較少的if語句，希望您會發現實現所需功能更容易，並且出錯和意外行為的可能性也較小。

抱歉，如果您不認為這直接有用。

注意：第3行末尾的原始代碼中有錯誤：...“ block” ,;

Answer 3

我想建議的另一種方法是將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值代替if語句，並將其用作類名。 由於數字不是有效的類名，因此將其附加到字母j ，以表示“作業”。

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/