如何在不使用jQuery的情況下切換onClick var div類樣式？

Question

我試圖在單擊按鈕時使用類名切換所有元素的高度。

這是我目前正在使用的。 現在，它將第一次在onClick上起作用，但是在第二次點擊時不會變回原來的狀態。 當我將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不能正確開火。 有任何想法嗎？

謝謝-特雷弗

Answer 1

if條件檢查錯誤，則需要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 個解決方案

解決方案1
0 2013-09-22 10:41:01

解決方案2
0 2013-09-22 14:10:53

如何在不使用jQuery的情況下切換onClick var div類樣式？

問題描述

2 個解決方案

解決方案1 0 2013-09-22 10:41:01

解決方案2 0 2013-09-22 14:10:53

解決方案1
0 2013-09-22 10:41:01

解決方案2
0 2013-09-22 14:10:53