[英]How to associate two DOM elements?
I have this simple HTML structure: 我有这个简单的HTML结构:
<ul>
<li> One <p> Foo is a fool. </p> </li>
<li> Two <p> Bar is not Barbie. </p> </li>
<li> Three <p> Baz likes bazookas. </p> </li>
</ul>
<div id="pane"></div>
As you can see, there is a UL list. 如您所见,这里有一个UL清单。 Each LI item contains a paragraph that is at all times hidden.
每个LI项目都包含一个始终隐藏的段落。
What I want to do is this: 我想要做的是:
Whenever the user clicks a LI element, the corresponding P element should be transfered to the #pane DIV. 每当用户单击LI元素时,应将相应的P元素传输到#pane DIV。 And then, when the user clicks the same LI element again, the P element should be transfered back to its original location.
然后,当用户再次单击相同的LI元素时,应将P元素移回到其原始位置。
Live demo: http://jsfiddle.net/u5y6u/1/ 现场演示: http : //jsfiddle.net/u5y6u/1/
This is the jQuery code that I'm using currently: 这是我当前正在使用的jQuery代码:
var p;
$('li').toggle(function() {
p = $(this).find('p').appendTo('#pane');
}, function() {
p.appendTo(this);
});
The local variable p
is used to store the reference to the paragraph when it is inside the #pane DIV. 局部变量
p
在#pane DIV中时,用于存储对该段落的引用。 This obviously works only for one LI element, because if the user clicks on one LI element and then immediately after that on another LI element, the p
variable is overwritten with the new paragraph reference. 显然,这仅适用于一个LI元素,因为如果用户单击一个LI元素,然后紧接着又单击另一个LI元素,则
p
变量将被新的段落引用覆盖。
This is what I would like to do: 这是我想做的:
Whenever a P element is transfered to the #pane DIV, I want to somehow associate that P element with the LI element that originally contained it, so that when the LI is clicked again, I know which P element I have to transfer back. 每当将P元素传输到#pane DIV时,我都想以某种方式将该P元素与最初包含该元素的LI元素相关联,这样,当再次单击LI时,我知道我必须回传哪个P元素。
How would I do this? 我该怎么做?
You could 你可以
use naming convention for ids: li has the same id as p plus li- prefix 对id使用命名约定: li具有与p相同的id加上li-前缀
store p id in li's data- attribute 将p id存储在li的data-属性中
use the same css class for each pair of li / p 对每对li / p使用相同的CSS类
You could use the data()
(docs) method and/or the jQuery.data()
(docs) method to give each <li>
element a reference to its <p>
element. 您可以使用
data()
(docs)方法和/或jQuery.data()
(docs)方法为每个<li>
元素提供对其<p>
元素的引用。
http://jsfiddle.net/u5y6u/3/ http://jsfiddle.net/u5y6u/3/
$('li').each(function() {
var $th = $(this);
$th.data('relatedP', $th.find('p'));
})
.toggle(function() {
$.data(this,'relatedP').appendTo('#pane');
}, function() {
$.data(this,'relatedP').appendTo(this);
});
Well one way you could do it is with an each
statement to give each p
it's own scope. 嗯,一种可行的方法是使用
each
语句赋予每个p
自己的范围。 See fiddle 见小提琴
$('li').each(function(){
var p = $(this).find('p');
$(this).toggle(
function() { p.appendTo('#pane'); },
function() { p.appendTo(this); }
);
});
If you can put your dynamic content in the 'pane' div and toggle the visibility, the logic becomes a bit simpler. 如果您可以将动态内容放在“窗格” div中并切换可见性,则逻辑会变得更加简单。 Here is an example:
这是一个例子:
http://jsfiddle.net/rcravens/u5y6u/4/ http://jsfiddle.net/rcravens/u5y6u/4/
Bob 短发
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.