0

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

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

  • 新用户
  • 以前的用户
  • 现有用户

div我的 html id 中有 4 个new / previous / existing 和 existinginfo

该页面以 alldiv的关闭开始，但我想更改代码以修改它们以根据选择的下拉列表显示。

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

Previous user- NEW和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>
4

1 回答 1

0

看看这里：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/

代码

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;
    }
}
于 2013-06-03T12:16:05.120 回答