Question

任何人都可以在回调中解释this。

实施例。网页。

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
  <script src="myApp.js"></script>
</head>
<body>
  <button type="button" id="btn001">Show</button><br/>
  <p id="p001" class="article">Some contents...</p>
  <button type="button" id="btn002">Show</button><br/>
  <p id="p002" class="article">Other content...</p>
  <!-- more paragraphs -->
</body>
</html>

首先，我为每个段落编写了一个函数。 myApp.js 的源代码。

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    if ($(this).html() === "Show") {
      $(this).html("Hide");
    } else {
      $(this).html("Show");
    }
    $("#p001").toggle();
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    if ($(this).html() === "Show") {
      $(this).html("Hide");
    } else {
      $(this).html("Show");
    }
    $("#p002").toggle();
  });
  // repeat code for next paragraphs
});

我对代码重复感到生气，所以我尝试将代码排除在函数之外。

function handleHideShow(par) {
  if ($(this).html() === "Show") {
    $(this).html("Hide");
  } else {
    $(this).html("Show");
  }
  par.toggle();
}

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    handleHideShow($("#p001"));
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    handleHideShow($("#p002"));
  });
});

切换段落有效，但button上的文字没有变化。任何人都可以解释this会发生什么吗？

为什么在第一个示例$(this)中选择了被点击的元素？
第二个例子中的$(this)是什么？

如何解决这个问题？

Answer 1

您的第一个功能是事件处理程序。使用事件处理程序$(this)自动引用被单击，更改，悬停等元素.jQuery为您创建$(this)，虽然您无法明确地看到它传递给函数它可用于点击处理程序回调中的所有代码。

你的第二个函数是一个简单的函数，它不是一个事件处理程序，因此jQuery不会为你创建$(this)引用

在您的代码中，您可以从$(this)等事件处理程序中传递handleHideShow($(this),$("#p002"));，并在您的函数中引用function handleHideShow(btn, par)。然后，在handleHideShow内，btn将引用与您的点击处理程序中引用的$(this)相同的元素（请参阅下面的第二个代码段）。

但是，我会通过提供按钮和段落类而不是ID来简化代码并执行此操作：

＆＃13;

$(document).ready(function () {
  $('.article').hide();
  $('.myBtn').click(function(){
    $(this).html( $(this).html() == 'Show' ? 'Hide' :'Show' );
    $(this).nextAll('.article').first().toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <html>
    <head>
      <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
      <script src="myApp.js"></script>
    </head>
    <body>
      <button type="button" class="myBtn">Show</button><br/>
      <p class="article">Some contents...</p>
      
      <button type="button" class="myBtn">Show</button><br/>
      <p class="article">Other content...</p>
      <!-- more paragraphs -->
    </body>
    </html>

＆＃13;

现在，有人可能认为这样效率较低，因为jQuery必须搜索更多元素来查找段落，但我相信它更加强大，因为您可以添加任意数量的按钮和段落，而不必担心所有顺序id s。老实说，你必须拥有一个非常庞大的网页才能看到任何性能问题。

＆＃13;

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    handleHideShow($(this),$("#p001"));
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    handleHideShow($(this),$("#p002"));
  });
});

function handleHideShow(btn, par) {
  if (btn.html() === "Show") {
    btn.html("Hide");
  } else {
    btn.html("Show");
  }
  par.toggle();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
  <script src="myApp.js"></script>
</head>
<body>
  <button type="button" id="btn001">Show</button><br/>
  <p id="p001" class="article">Some contents...</p>
  
  <button type="button" id="btn002">Show</button><br/>
  <p id="p002" class="article">Other content...</p>
  <!-- more paragraphs -->
</body>
</html>

＆＃13;

Answer 2

调用该函数时没有特殊的上下文，this不是元素改为引用该函数

$("#btn001").click(handleHideShow);
$("#btn002").click(handleHideShow);

function handleHideShow() {
    $(this).html(function (_, html) {
        return html === "Show" ? "Hide" : "Show";
    });

    $('#' + this.id.replace('btn', 'p')).toggle();
}

FIDDLE

Answer 3

您需要在函数中传递按钮的对象：

试试这个：

function handleHideShow(par,that) {
  if ($(that).html() === "Show") {
    $(that).html("Hide");
  } else {
    $(that).html("Show");
  }
  par.toggle();
}

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    handleHideShow($("#p001"),this);
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    handleHideShow($("#p002"),this);
  });
});

或者你也试试这个：

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("button[id^='btn']").click(function () {
    if ($(this).html() === "Show") {
      $(this).html("Hide");
    } else {
      $(this).html("Show");
    }
    $(this).next().toggle();
  });
});

以上代码是最佳代码，您可以根据需要添加多个按钮。

用＆＃39;这个＆＃39;更改点击元素的文字。在JavaScript / jQuery回调中

3 个答案: