点击更改元素的文本与“本”在JavaScript / jQuery的回调(Change the te

任何人都可以解释的是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的，做这个产品总数简化代码：

 $(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>

Answer 2:

您需要通过按钮的对象的功能：

尝试这个：

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

上面的代码是最优的，你可以添加按钮，只要你想尽可能多的。

Answer 3:

该功能被称为没有特殊背景，而this是不元素。
引用函数，而不是

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

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

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

小提琴

文章来源: Change the text of clicked element with 'this' in JavaScript / jQuery callback