Question

这可能是一个简单的问题，我只是在密集。我看过几本jquery书，没有什么东西跳出来，我可能会错过一些东西。

我正在寻找在网页上div / dom项目之间进行通信的“正确”最佳实践方式吗？

例如，我有一个包含5个面板的页面，当选择链接时会显示这些面板，它们会隐藏/显示/运行一些更改页面上其他部分的代码。像这个片段：

<ul>
<li><div id="unique_name_1_anchor">Unique div 1</div></li>
<li><div id="unique_name_2_anchor">Unique div 2</div></li>
<li><div id="unique_name_3_anchor">Unique div 3</div></li>
<li><div id="unique_name_4_anchor">Unique div 4</div></li>
</ul>

......页面上的其他地方

<div id="unique_name_1_panel">Some panel 1 stuff here</div>
<div id="unique_name_2_panel">Some panel2 stuff here<div>
<div id="unique_name_3_panel">Some panel3 here</div>
<div id="unique_name_4_panel">Some panel4 here</div>

概念是当用户点击unique_name_X_anchor div时，在相应的面板上执行某些操作（即显示/隐藏等...）。我现在一直在做的是解析id ie（$（this）.replace（“_ anchor”，“_ panel”）以获得另一个dom元素的div id。这看起来很笨拙而且必须有更好/更多这样做的正确方法。建议？

由于

Answer 1

一些想法：

使用jQuery元数据插件添加一些指向相应DIV的元数据。 http://plugins.jquery.com/project/metadata
获取广告素材，使用其他有效的DOM元素或有效属性（rel，href）来保存此信息
如果您以编程方式获得此数据，请将$('.anchor').data('correspondingPanel')设置为相应的ID（或其他一些有用的数据）。
如果索引始终相同，请使用jQuery索引方法获取锚点的索引，并显示具有相同索引的面板。 http://api.jquery.com/index/

Answer 2

您需要使用id吗？这种方法是否合适？

HTML

<ul id="anchors">
    <li><div>Unique div 1</div></li>
    <li><div>Unique div 2</div></li>
    <li><div>Unique div 3</div></li>
    <li><div>Unique div 4</div></li>
</ul>

<div id="panels">
    <div>Some panel 1 stuff here</div>
    <div>Some panel2 stuff here<div>
    <div>Some panel3 here</div>
    <div>Some panel4 here</div>
</div>

的jQuery

$('#anchors div').click(function() {
    var panel = $('#panels div').eq($(this).index());
    panel.show();
})

Answer 3

中的某些内容

给li div一个名为divLinks的类给面板div类叫做pabel

$('div.divLinks').click(function(){
    $('.panel').hide();
    $('.panel').eq($(this).index()).show();
});

Answer 4

一种方法是创造性地使用类名。

假设：

<div id="unique_name_1_anchor">Unique div 1</div>
<div class="unique_name_1_anchor">Div 1 panel</div>

您可以执行以下操作：

$('#unique_name_1_anchor).click(function(){$('.'+this.id).show()})

在jquery中div之间进行通信的正确方法？

4 个答案:

HTML

的jQuery