如果声明显示div但隐藏其他div在表单中？

时间：2015-04-09 00:06:32

标签： javascript html

我正在寻找创建一个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>

3 个答案:

答案 0 :(得分：0)

getElementById需要元素的唯一ID。如果您想要更加含糊一点，请尝试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>

答案 1 :(得分：0)

我想建议一种不同的JavaScript方法，它可以帮助您更轻松地实现所需的行为，同时也使其不易出错（有时会出现大量if语句）并且更容易阅读。< / p>

如果标准是一次只显示一个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">
...

最后的任务是展示用户感兴趣的那个。说＆＃34; small.value＆＃34;之间是否存在直接映射是否正确？和特定的工作地点？

建议的方法：

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行末尾的原始代码出错：...＆＃34; block＆＃34;，

答案 2 :(得分：0)

我想建议的另一种方法是将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语句，并将其作为类名应用。由于数字不是有效的类名，我会将其附加到字母function showJobSite(obj){ var el = document.getElementById('container'); el.setAttribute('class', 'container j' + obj.value); }; 上，作为“工作”。

j + n

最后，我们的CSS可以设置为隐藏所有内容，然后根据.container > div { display: none; } .container.j3 #smalljobsite, .container.j7 #mediumjobsite, .container.j0 #largejobsite, .container.j8 #largejobsite{ display: block; } 类名显示子窗体。像：

{{1}}

这是演示的小提琴：http://jsfiddle.net/5knL7zf8/

相关问题
最新问题