点击更改元素的文本与“本”在JavaScript中/ jQuery的回调 [英] Change the text of clicked element with 'this' in JavaScript / jQuery callback
问题描述
任何人能解释的是这个回调。
为例。
网页。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-1.11.2.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =myApp.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮式=按钮ID =btn001＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;
＆LT; p = IDP001级=文章＆GT;部分内容...＆LT; / P＆GT;
＆LT;按钮式=按钮ID =btn002＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;
＆LT; p = IDP002级=文章＆gt;其他内容...＆LT; / P＆GT;
＆LT;！ - 多个段落 - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
首先，我写的每个段落的功能。来源$ C $ c中的的 myApp.js 的
$（文件）。就绪（函数（）{
//隐藏在开始时所有文章
$（文章）隐藏（）。
//按钮1隐藏/显示第一段
$（＃btn001）。点击（函数（）{
如果（$（本）。html的（）===显示）{
$（本）。html的（隐藏）;
}其他{
$（本）。html的（显示）;
}
$（＃P001）切换（）。
}）;
//按钮2隐藏/显示第二段
$（＃btn002）。点击（函数（）{
如果（$（本）。html的（）===显示）{
$（本）。html的（隐藏）;
}其他{
$（本）。html的（显示）;
}
$（＃P002）切换（）。
}）;
//重复code下一段落
}）;
我生气的code重复，所以我试图不包括code发挥作用。
函数handleHideShow（参数）{
如果（$（本）。html的（）===显示）{
$（本）。html的（隐藏）;
}其他{
$（本）。html的（显示）;
}
par.toggle（）;
}$（文件）。就绪（函数（）{
//隐藏在开始时所有文章
$（文章）隐藏（）。
//按钮1隐藏/显示第一段
$（＃btn001）。点击（函数（）{
handleHideShow（$（＃P001））;
}）;
//按钮2隐藏/显示第二段
$（＃btn002）。点击（函数（）{
handleHideShow（$（＃P002））;
}）;
}）;
切换段落作品，但对按钮上的文本没有改变。任何人都可以解释发生了什么这个？
- 为什么在第一个例子
$（本）选择点击的元素？ - 什么是
$（本）在第二个例子？
和如何解决这个问题呢？
您第一个功能是事件处理程序。随着事件处理程序 $（本）自动是指被点击，改变了元素，徘徊等。jQuery的创建 $（本）为你，虽然你不能明确地把它传递到它是提供给所有的点击处理程序的回调中的code的作用。
你的第二个功能是一个简单的函数，而不是一个事件处理程序，因此jQuery的不创建 $（本）你参考
在您的code，你可以通过 $（本）从事件处理程序，比如 handleHideShow（$（本），$（ ＃P002））; ，并在你的函数如函数handleHideShow（BTN，PAR）引用它。然后，在 handleHideShow ， BTN 将引用同样的元素 $（本）您单击处理程序简称（参见下面的第二个片段）。
但是，我想产品总数简化code。通过给按钮和段落，而不是类的ID，做这样的：
$（文件）。就绪（函数（）{\r
$（'文章'）隐藏（）。\r
$（'。myBtn'）。点击（函数（）{\r
$（本）的.html（$（本）。html的（）=='显示'隐藏'？'显示'）;\r
$（本）.nextAll（'文章'。）（第）切换（）。\r
}）;\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.0/jquery.min.js\"></script>\r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-1.11.2.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =myApp.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
＆LT;按钮式=按钮级=myBtn＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;\r
＆LT; p =类文章＆GT;部分内容...＆LT; / P＆GT;\r
\r
＆LT;按钮式=按钮级=myBtn＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;\r
＆LT; p =类文章＆gt;其他内容...＆LT; / P＆GT;\r
＆LT;！ - 多个段落 - ＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
现在，人们可以说，这是因为jQuery有通过更多的元素搜索找到段落效率较低，但我相信这是因为，只要你喜欢，你可以添加许多按钮和段落更稳健，而不必担心所有的连续 ID 秒。和诚实，你必须有一个pretty巨头网页看到任何性能问题。
$（文件）。就绪（函数（）{\r
//隐藏在开始时所有文章\r
$（文章）隐藏（）。\r
//按钮1隐藏/显示第一段\r
$（＃btn001）。点击（函数（）{\r
handleHideShow（$（本），$（＃P001））;\r
}）;\r
//按钮2隐藏/显示第二段\r
$（＃btn002）。点击（函数（）{\r
handleHideShow（$（本），$（＃P002））;\r
}）;\r
}）;\r
\r
功能handleHideShow（BTN，PAR）{\r
如果（btn.html（）===显示）{\r
btn.html（隐藏）;\r
}其他{\r
btn.html（显示）;\r
}\r
par.toggle（）;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.0/jquery.min.js\"></script>\r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-1.11.2.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =myApp.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
＆LT;按钮式=按钮ID =btn001＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;\r
＆LT; p = IDP001级=文章＆GT;部分内容...＆LT; / P＆GT;\r
\r
＆LT;按钮式=按钮ID =btn002＆gt;显示＆LT; /按钮＆GT;＆LT; BR /＆GT;\r
＆LT; p = IDP002级=文章＆gt;其他内容...＆LT; / P＆GT;\r
＆LT;！ - 多个段落 - ＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
Can anybody explain is this in the callback.
Example. Web page.
<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>
First, I had written a function for each paragraph. Source code of the 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
});
I get angry with the code repetition, so I tried excluding code to function.
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"));
});
});
Toggling paragraphs works, but the text on the button is not changing. Can anybody explain what happens to this?
- Why in the first example
$(this)selects the clicked element? - What is
$(this)in the second example?
And how to solve this problem?
Your first function is an event handler. With Event handlers $(this) automatically refers to the element that was clicked, changed, hovered, etc.. jQuery creates $(this) for you and, while you can't explicitly see it passed into the function it is available to all the code within the click handler's callback.
Your second function is a simple function and is not an event handler therefore jQuery does not create the $(this) reference for you
In your code, you could pass $(this) from your event handler like handleHideShow($(this),$("#p002")); and reference it in your function like function handleHideShow(btn, par). Then, inside handleHideShow, btn will refer to the same element as $(this) referred to in your click handler (see the second snippet below).
But, I would simplify the code alltogether by giving the buttons and paragraphs classes instead of ids and doing this:
$(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>
Now, one could argue that this is less efficient as jQuery has to search through more elements to find the paragraph but I believe it to be more robust as you can add as many buttons and paragraphs as you like without worrying about all the sequential ids. And honestly, you'd have to have a pretty giant webpage to see any performance issues.
$(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>
这篇关于点击更改元素的文本与“本”在JavaScript中/ jQuery的回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
