根据所选内容扩展和折叠多个DIV元素

Question

我需要一些JavaScript帮助。这需要改变。

我的HTML有一个下拉列表，默认选择为“选择一个”

• 新用户
• 上一位用户
• 现有用户

我的html id new / previous / existing和existinginfo

中有4个div

页面以所有div已关闭开始，但我想更改代码以修改它们以显示，具体取决于选择的下拉列表。

如果选择下拉列表为New user，则仅显示“新”div其他人已关闭。

Previous user - 新和 PREVIOUS div会显示其他人已关闭。

显示现有existing user

div，并显示现有信息div（新信息和之前信息已关闭）。

我相信我需要一个额外的函数，这些函数是我的slideuprunnew / slidedownRunnew函数的副本和附加名称（即slideuprunPrev和SlideDownRunPrev）但我在解决如何进行Slide()时遇到了很多问题功能和正确嵌套所有if。

<script type="text/javascript">
 var sliderIntervalId = 0;
 var sliderHeight = 1;
 var sliding = false;
 var slideSpeed = 5;

 function Slide() {
     var selected = document.getElementById('selection');
     if (sliding)
         return;
     sliding = true;

     if (sliderHeight == 150 && selected.value != "new user")
         sliderIntervalId = setInterval('SlideUpRunNEW()', 30);
     else {

         if (selected.value == "new user")
             sliderIntervalId = setInterval('SlideDownRunNEW()', 30);

         else {
             sliding = false;
             return;
         }
     }
 }


 function SlideUpRunNEW() {
     slider = document.getElementById('new');
     if (sliderHeight <= 1) {
         sliding = false;
         sliderHeight = 1;
         slider.style.height = '1px';
         clearInterval(sliderIntervalId);
     }
     else {
         sliderHeight -= slideSpeed;
         if (sliderHeight < 1)
             sliderHeight = 1;
         slider.style.height = sliderHeight + 'px';
     }
 }

 function SlideDownRunNEW() {
     slider = document.getElementById('new');
     if (sliderHeight >= 150) {
         sliding = false;
         sliderHeight = 150;
         slider.style.height = '150px';
         clearInterval(sliderIntervalId);
     }
     else {
         sliderHeight += slideSpeed;
         if (sliderHeight > 150)
             sliderHeight = 150;
         slider.style.height = sliderHeight + 'px';
     }
 }

</script>

Answer 1

看看这里：http://jsfiddle.net/uZcTH/

我使用JQuery，如果你只需要纯粹的javascript，那么这些不是你要找的机器人。

<强> JS

 $("#newUser").show();
 $("#previousUser").hide();
 $("#existingUser").hide();

 $("#userPicker").change(function () {
     var val = $(this).val();
     switch (val) {
         case "1":
             $("#newUser").show();
             $("#previousUser").hide();
             $("#existingUser").hide();
             break;
         case "2":
             $("#newUser").hide();
             $("#previousUser").show();
             $("#existingUser").hide();
             break;
         case "3":
             $("#newUser").hide();
             $("#previousUser").hide();
             $("#existingUser").show();
             break;
     }
 });

<强> HTML

<select id="userPicker">
    <option value="1">New User</option>
    <option value="2">Previous User</option>
    <option value="3">Existing User</option>
</select>
<div id="newUser">new user</div>
<div id="previousUser">previous user</div>
<div id="existingUser">existing user</div>

希望它有所帮助，问候

---

修改

纯js版本：http://jsfiddle.net/uZcTH/2/

<强> CODE

document.getElementById("newUser").style.display = "none";
document.getElementById("previousUser").style.display = "none";
document.getElementById("existingUser").style.display = "none";

document.getElementById("userPicker").onchange = function () {
    switch (this.selectedIndex) {
        case 0:
            document.getElementById("newUser").style.display = "block";
            document.getElementById("previousUser").style.display = "none";
            document.getElementById("existingUser").style.display = "none";
            break;
        case 1:
            document.getElementById("newUser").style.display = "none";
            document.getElementById("previousUser").style.display = "block";
            document.getElementById("existingUser").style.display = "none";
            break;
        case 2:
            document.getElementById("newUser").style.display = "none";
            document.getElementById("previousUser").style.display = "none";
            document.getElementById("existingUser").style.display = "block";
            break;
    }
}