如何在javascript中正确使用事件处理函数中的变量

问题描述 投票：0回答：2

我必须使用javascript调整div元素的大小。我有这个代码 - 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="bootstrapCSS/bootstrap.css">
</head>

<body>
    <div class="container">
        <div id="column1" class="column">left</div>
        <div id="column2" class="column">middle</div>
        <div id="column3" class="column">right</div>
        <script>
            var columns = document.getElementsByClassName("column");
            var displaysize = window.innerWidth;

            window.onresize = function () {
                for (const column of columns) {
                    if (window.innerWidth < 560) {
                        column.style.display = "block";
                    }
                    else {
                        column.style.display = "inline-block";
                    }
                }
            }
        </script>
    </div>
</body>

</html>

这里的脚本工作正常，但是当在if语句中使用displaysize变量时，该函数不起作用。那么，这段代码有什么问题呢。

编辑

当函数命名为函数resizer（），然后调用事件时，即使这不起作用

javascript html css
2个回答
2
投票

你的代码中的问题是，正如@abvlee所说，你的displaysize值是在事件处理程序之外实现的。然后，调用函数时不会更改该值。将它移动到处理程序内部，你会发现它有效。

var columns = document.getElementsByClassName("column");

window.onresize = function() {
    var displaysize = window.innerWidth;
    for (const column of columns) {
    
       if (displaysize < 560) {
          column.style.display = "block";
       } else {
          column.style.display = "inline-block";
       }
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>home page</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="bootstrapCSS/bootstrap.css">
</head>

<body>
  <div class="container">
    <div id="column1" class="column">left</div>
    <div id="column2" class="column">middle</div>
    <div id="column3" class="column">right</div>
  </div>
</body>

</html>
1
投票

displaysize变量未在窗口调整大小时重新分配新窗口值，因为它超出了函数的范围。

解决方案1

<script>
  var columns = document.getElementsByClassName('column');
  var columnArrayLength = columns.length;

  window.addEventListener('resize', function() {
    var displaysize = window.innerWidth;

    for (var i = 0; i < columnArrayLength; i++) {
      if (displaysize < 560) {
        column.style.display = "block";
      } else {
        column.style.display = "inline-block";
      }
    }
  });
</script>

虽然这解决了displaysize超出范围的问题，但它并不是你所要求的，所以我有下一个解决方案。

解决方案2

<script>
  var columns = document.getElementsByClassName('column');
  var displaysize = window.innerWidth;
  var columnArrayLength = columns.length;

  window.addEventListener('resize', function() {
    displaysize = window.innerWidth;

    for (var i = 0; i < columnArrayLength; i++) {
      if (displaysize < 560) {
        column.style.display = "block";
      } else {
        column.style.display = "inline-block";
      }
    }
  });
</script>

这个解决方案就是你要求的，displaysize是在函数之外定义的，然后当窗口调整大小时会重新分配一个新值。

But wait there's more!

您可以在css中使用媒体查询，而不是使用javascript。

.column {
  display: block;
}

@media(min-width: 560px) {
  .column {
    display: inline-block;
  }
}

这是最好的解决方案，不依赖于javascript！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.