Question

为什么使用匿名函数的第一个块与使用命名函数的第二个块的工作方式不同？第一个块在＆＃34; Hello＆＃34;之间变化。和＃34;再见＆＃34;但第二个没有。

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>

Answer 1

~~$（＆＃34;＃title＆＃34;）。click（sayHello（））;~~ 使用：

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

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

你应该指定一个sayHello，而不是执行sayHello()

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title" onclick="sayGoodbye();"> Hello </h1>

＆＃13;

这是另一个关于切换两个状态或两个功能的好消息：
https://stackoverflow.com/a/21520499/383904

Answer 2

对代码进行了一些改进。

阅读Decoupling Your HTML, CSS, and 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＆amp; is-goodbye - 描述h1元素的状态。它们帮助CSS显示或隐藏h1中的元素。我从javascript（解耦）中删除了HTML，我很少以这种方式使用javascript来更新HTML，因为很难确定HTML的更新位置和位置。

我个人的意见不是使用.click()而只是坚持使用更新且更具扩展性的.on()。 toggleClass()执行它听起来的样子，如果该类存在，则删除它，如果它没有，则添加它。

Answer 3

当你输入sayHello（）时，它会使用执行sayHello的结果。相反，你应该做的是传递sayHello，没有括号，代表函数本身

这两个代码块之间存在差异

3 个答案: