使用'；更改已单击元素的文本；这'；在JavaScript/jQuery回调中_Javascript_Jquery_Button_Click

使用'；更改已单击元素的文本；这'；在JavaScript/jQuery回调中
javascript jquery button
使用'；更改已单击元素的文本；这'；在JavaScript/jQuery回调中,javascript,jquery,button,click,Javascript,Jquery,Button,Click,谁能解释一下回调中的是这个例如。网页 <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<
谁能解释一下回调中的
是这个
例如。
网页
<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) {
  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"));
  });
});

切换段落是可行的，但是按钮上的文本不会改变。有人能解释一下这个发生了什么吗

为什么在第一个示例中$（this）
选择单击的元素
第二个例子中的$（this）
是什么

那么如何解决这个问题呢？
调用函数时没有特殊的上下文，而这个
不是元素。

改为引用函数
$("#btn001").click(handleHideShow);
$("#btn002").click(handleHideShow);

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

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

调用函数时没有特殊上下文，并且此
不是元素。

改为引用函数
$("#btn001").click(handleHideShow);
$("#btn002").click(handleHideShow);

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

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

您需要在函数中传递按钮的对象：
试试这个：
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();
  });
});

上述代码是最佳的，您可以添加任意数量的按钮。
您需要在函数中传递button的对象：
试试这个：
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();
  });
});

上面的代码是最佳的，您可以添加任意数量的按钮。
您的第一个功能是事件处理程序。使用事件处理程序$（此）
自动引用已单击、更改、悬停等的元素。。jQuery为您创建$（this）
，虽然您无法显式地看到它传递到函数中，但它可用于click处理程序回调中的所有代码
第二个函数是一个简单的函数，不是事件处理程序，因此jQuery不会为您创建$（this）
引用
在代码中，可以从事件处理程序传递$（this）
，如handleHideShow（$（this），$（“#p002”）并在函数中引用它，如函数handleHideShow（btn，par）
。然后，在handleHideShow
中，btn
将引用与单击处理程序中引用的$（此）
相同的元素（请参见下面的第二个片段）
但是，我会通过提供按钮和段落类而不是ID来简化代码：

$（文档）.ready（函数（）{
$（'.article'）.hide（）；
$（'.myBtn'）。单击（函数（）{
$（this.html（$（this.html（）=='Show'？'Hide'：'Show'）；
$（this.nextAll（'.article'）.first（）.toggle（）；
});
});

显示

一些内容
显示

其他内容
您的第一个函数是事件处理程序。使用事件处理程序$（此）
自动引用已单击、更改、悬停等的元素。。jQuery为您创建$（this）
，虽然您无法显式地看到它传递到函数中，但它可用于click处理程序回调中的所有代码
第二个函数是一个简单的函数，不是事件处理程序，因此jQuery不会为您创建$（this）
引用
在代码中，可以从事件处理程序传递$（this）
，如handleHideShow（$（this），$（“#p002”）并在函数中引用它，如函数handleHideShow（btn，par）
。然后，在handleHideShow
中，btn
将引用与单击处理程序中引用的$（此）
相同的元素（请参见下面的第二个片段）
但是，我会通过提供按钮和段落类而不是ID来简化代码：

$（文档）.ready（函数（）{
$（'.article'）.hide（）；
$（'.myBtn'）。单击（函数（）{
$（this.html（$（this.html（）=='Show'？'Hide'：'Show'）；
$（this.nextAll（'.article'）.first（）.toggle（）；
});
});

显示

一些内容
显示

其他内容
现在您正在切换按钮的可见性，而不是段落的可见性。@adaneo 1。我错过了你的css（在小提琴上看到的）和做相反事情的按钮。2.脚本应该放在正文之后，或者两个赋值必须放在$（document）.ready（）
@user2793410-脚本的放置位置由您决定，只要元素可用。如果您需要切换到另一种方式，只需切换文本的顺序，更新答案即可，我只是假设元素将被隐藏，因为您使用的按钮文本是“Show”@adaneo 3。只有当相应的p
和按钮具有相同后缀的id
s时，脚本才能正常工作。例如p001-btn001。当然，在我的情况下，这是100%正确的假设。@adaneo 4。请您解释一下$（this）.html（function（u，html）{
行。5.事件
参数发生了什么变化？现在您正在切换按钮的可见性，而不是段落。@adaneo 1.我错过了您的css（在小提琴中看到了它）以及执行相反操作的按钮。2.脚本应放在正文之后，或者2个赋值必须放在$（document.ready（）中
@user2793410-脚本的放置位置由您决定，只要元素可用。如果您需要切换另一种方式，只需切换文本的顺序，更新答案即可。我只是假设元素将被隐藏，因为您使用的按钮文本为“显示”@adaneo 3.只有当相应的p
和按钮具有相同后缀的id
s时，脚本才能正常工作。例如p001-btn001。这当然是我的情况下100%正确的假设。@adaneo 4.您介意解释一下$（this）.html（函数（\uu，html）{
行。5.发生了什么