这两个代码块之间的差异

Differences betwen these two blocks of code

本文关键字：之间 代码 两个      更新时间：2023-09-26

为什么使用匿名函数的第一个块与使用命名函数的第二个块的工作方式不同？第一个块在"你好"answers"再见"之间变化，但第二个块没有。

1st——使用匿名函数：

function sayGoodbye() {
    $("#title").html("Goodbye");
    $("#title").click(function () {
        $("#title").html("Hello");
        $("#title").off("click");
    });
};

第二——使用命名函数：

function sayGoodbye() {
    console.log("goodbye");
    $("#title").html("Goodbye");
    $("#title").click(sayHello());
};
function sayHello() {
    console.log("hello");
    $("#title").html("Hello");
    $("#title").off("click");
}

HTML:

<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <h1 id="title" onclick="sayGoodbye();"> Hello </h1>
</body>

$（"#title"）。点击（sayHello（）） 用途：

$("#title").on("click", sayHello);

（或…$("#title").click(sayHello);）

您应该分配sayHello，而不是执行sayHello()

function sayGoodbye(){
  console.log("goodbye");
  $("#title").html("Goodbye");
  $("#title").click(sayHello);
};
function sayHello() {
  console.log("hello");
  $("#title").html("Hello");
  $("#title").off("click");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title" onclick="sayGoodbye();"> Hello </h1>

下面是另一篇关于切换两个状态或两个函数的精彩阅读：
https://stackoverflow.com/a/21520499/383904

对代码进行了一些改进。

请阅读解耦HTML、CSS和JavaScript。

Html:

<body>
  <h1 class="js-say is-hello">
    <span class="say say-hello">Hello</span>
    <span class="say say-goodbye">Goodbye</span>
  </h1>
</body>

CSS：

// any class with say should be hidden
.say {
  display: none; }
// over-ride previous, if we're in an element of is-hello show say-hello
.is-hello .say.say-hello{
  display: inline; }
// over-ride previous, if we're in an element of is-goodbye show say-goodbye
.is-goodbye .say.say-hello{
  display: inline; }

jquery

$(".js-say").on('click', function () {
  var $this = $(this);
  $this.toggleClass('is-hello');
  $this.toggleClass('is-goodbye');
});

.js-say-现在是jquery的触发器。它与任何可能在元素上运行的CSS解耦。我在它前面加了js-，这意味着它永远不应该有CSS规则，只应该用于javascript事件。

is-hello&is-goodbye-描述h1元素的状态。它们帮助CSS显示或隐藏h1中的元素。我从javascript中删除了HTML（去耦），我很少以这种方式使用javascript来更新HTML，因为很难弄清楚HTML是从谁和哪里更新的。

我个人的观点是不要使用.click()，只使用更新且可扩展性更强的.on()。toggleClass()做它听起来像的事情，如果类存在，则删除它，如果不存在，则添加它。

当你放入sayHello（）时，它使用执行sayHello的结果。相反，您应该做的是不带括号地传递sayHello，它表示函数本身

相关文章：