主页 / 问题 / 1141424
Accepted
LeopardL GD
Asked:2020-06-16 01:13:33 +0000 UTC2020-06-16 01:13:33 +0000 UTC

单击按钮时如何在JS中发送信号？

  • 772

在这里，我有这样的事情。

<!DOCTYPE html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Текст!</strong> Еще текст... <strong>еще</strong> и еще.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button> 
</div>
</body>
最好不要在片段中执行此操作，因为由于某种原因，此处未按应有的格式对其进行格式化。
一般来说，我希望<button type="button" class="close" data-dismiss="alert" aria-label="Close">将某种信号发送到 JavaScript font.js。更具体地说，我希望变量在按下时clicked从默认值 0 变为 1。
顺便说一下，这是我的 JS 文件。


    const fonter = document.querySelector("section.p");
    var clicked = 0;

    if (var clicked == 1) {
            fonter.style.font-size = "12px";
        } else {
            fonter.style.font-size = "14px";
        }
    });

理论上，如果clicked == 1.
请告诉我如何将信号传递给 JavaScript，以及代码中是否有任何错误。提前致谢）

javascript

1 个回答

  1. Best Answer

    这个“信号”被称为事件。您需要在单击时运行代码。

    let fonter = document.querySelector("section.p");
let btn = document.querySelector(".close");

let clicked = false;
btn.addEventListener("click", function() {
  if( clicked ) {
    fonter.style.fontSize = "12px";
  } else {
    fonter.style.fontSize = "14px";
  }
  // См. → "Тернарный оператор", попробуйте переписать через него.
  
  clicked = !clicked; 
  // ! — логическое `НЕ`, false превращает в true, и наоборот.
});
    <section class="p">
  Test-test-test
</section>

<button type="button" class="close"> Click </button>

    一般来说，这样的事情可以通过类切换来完成：

    let fonter = document.querySelector("section.p");
let btn = document.querySelector(".close");

btn.addEventListener("click", function() {
  fonter.classList.toggle("font-14");
});
    section.p {
  font-size: 12px;
  color: red;
}
section.p.font-14 {
  font-size: 14px;
  color: green;
}
    <section class="p">
  Test-test-test
</section>

<button type="button" class="close"> Click </button>

    • 1

相关问题