0

我正在尝试在单击按钮时使用类名切换所有元素的高度。

这是我目前正在使用的。现在它将在第一次单击时起作用，但在第二次单击时不会变回。当我将 if 语句更改为 NOT true 时，该函数仍会触发。

<head>
<script type="text/javascript">
function changeHeight() {
var elems = document.getElementsByClassName('div1');
for(var i = 0; i < elems.length; i++) 
{
if (elems[i].style.height = '25px'){
    elems[i].style.height = '110px';
    }
else {
      elems[i].style.height = '25px';
      document.getElementById("expand").innerHTML="[+]";
}
</script>


<style type="text/css">
.div1 {
    overflow:hidden;
    height:25px;
}
</script>

</head>


<body>
<button type="button" id="expand" onClick="changeHeight();">[+]</button>
    <div class="div1">
        content
    </div>
    <div class="div1">
        content
    </div>
</body>

我相信问题是我无法让我的“else”开火，因为我的 if 没有正确开火。有任何想法吗？

谢谢-特雷弗

4

2 回答 2

0

您的if条件检查错误，您需要在条件检查中使用相等运算符（==）而不是赋值运算符（=），因此更改：

if (elems[i].style.height = '25px'){
..

至

if (elems[i].style.height == '25px'){ //use == not =
..

是的，for循环的结束标签}也不见了，做：

for(var i = 0; i < elems.length; i++) {
  if (elems[i].style.height == '25px'){
    elems[i].style.height = '110px';
  }
  else {
      elems[i].style.height = '25px';
      document.getElementById("expand").innerHTML="[+]";
  }
}
于 2013-09-22T10:41:01.383 回答
0

对此类任务使用后代选择器。这要容易得多。

http://jsfiddle.net/h7vGj/2/

<head>
   <style type="text/css">
        .div1 {
            overflow:hidden;
            height:25px;
        }

        .on .div1 {
            height: 110px;
        }
    </style>
    <script>
        function foo(ele) {
            if ( !ele.state ) {
                 document.body.className = "on";
                 ele.state = true;
            }
            else {
                 document.body.className = "";
                 ele.state = false;
            }
        };
    </script>
</head>
<body>
    <button type="button" id="expand" onclick="foo(this);">[+]</button>
    <div class="div1">
        content
    </div>
    <div class="div1">
        content
    </div>
</body>

PS。您的样式标签由脚本标签关闭。

于 2013-09-22T14:10:53.957 回答