如果声明显示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/