Question

我试图在按钮点击时用类名切换所有元素的高度。

这是我目前正在使用的内容。现在它将在第一次使用时点击，但在第二次点击时不会改变。当我将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>

我相信问题是我不能让我的'别人'开火，因为我的if不能正常射击。有什么想法吗？

由于 -Trevor

Answer 1

您的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="[+]";
  }
}

Answer 2

使用后代选择器执行此类任务。这更容易。

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。您的样式标记由脚本标记关闭。

如何在不使用jQuery的情况下切换onClick var div类样式？

2 个答案: