在 JavaScript / jQuery 回调中使用“this”更改单击元素的文本

Change the text of clicked element with 'this' in JavaScript / jQuery callback

本文关键字：单击 元素 文本 this jQuery JavaScript 回调      更新时间：2023-09-26

任何人都可以解释回调中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)是什么？

又该如何解决这个问题呢？

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

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

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

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

$(document).ready(function () {
  $('.article').hide();
  $('.myBtn').click(function(){
    $(this).html( $(this).html() == 'Show' ? 'Hide' :'Show' );
    $(this).nextAll('.article').first().toggle();
  });
});
<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>

现在，有人可能会争辩说，这效率较低，因为jQuery必须搜索更多元素才能找到段落，但我相信它更健壮，因为您可以根据需要添加任意数量的按钮和段落，而不必担心所有顺序id。老实说，你必须有一个相当大的网页才能看到任何性能问题。

$(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();
}
<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>

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

试试这个：

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();
  });
});

上面的代码是最佳的，您可以根据需要添加任意数量的按钮。

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

$("#btn001").click(handleHideShow);
$("#btn002").click(handleHideShow);
function handleHideShow() {
    $(this).html(function (_, html) {
        return html === "Show" ? "Hide" : "Show";
    });
    $('#' + this.id.replace('btn', 'p')).toggle();
}

小提琴

相关文章：