Jquery - 如何在drupal视图中只影响一个节点答案

【问题标题】：Jquery - How to affect just one node in drupal viewJquery - 如何在drupal视图中只影响一个节点
【发布时间】：2012-04-11 23:52:19
【问题描述】：

当我在 drupal 视图中单击一个节点时，它会切换视图中每个节点的主体，而不仅仅是我单击的节点。如何让 jquery 仅切换我正在单击的节点？这是我的节点模板头部的代码（node-type.tpl.php）

 <script>
 $("button").click(function () {
 $(".more").toggle();
 });
 </script>

以及要切换的主体的代码。

 <div class="more"><?php print $node->content['body']['#value']; ?></div>

目前，它在我的整个视图中切换每个 div 与“更多”类，而不仅仅是在我单击的节点中。如何将其限制为仅单击的节点？

我也希望一次只打开身体。 IE;当点击不同的节点时，前一个节点的主体切换为关闭。

我确定这可能很容易，但我似乎无法弄清楚......

【问题讨论】：

这将有助于查看最终的 HTML 而不是 PHP 代码。

标签： javascript jquery drupal views

【解决方案1】：

相对于.more 的按钮在哪里？

如果按钮位于.more 元素中，您需要执行以下操作：

$("button").click(function () {
    $('.more').hide();
    $(this).closest(".more").show();
});

如果按钮不是.more 的父级或祖先，您需要做更多的事情。如果按钮与.more 元素的顺序相同（并且没有任何不相关的按钮），您可以这样做：

$("button").click(function () {
    $('.more').hide();
    $('.more').eq( $('button').index( $(this) ) ).show();
});

但是，最好使用id 和href 或一些jQuery 数据将按钮链接到.more 内容：

<button class='morebutton' data-more="#more1">Button 1</button>
<button class='morebutton' data-more="#more2">Button 2</button>
<div class='more' id="more1">More Number 1</div>
<div class='more' id="more2">More Number 2</div>

脚本：

$(".morebutton").click(function () {
    $('.more').hide();
    $( $(this).data('more') ).show();
});

演示：http://jsfiddle.net/jtbowden/EfUxt/

有一些库可以帮助处理这些情况，例如 jQuery UI 选项卡。

【讨论】：

这是我使用第一个选项时遇到的错误； $(this).closest is not a function [Break On This Error] $(this).closest(".more").show();
你用的是什么版本的jQuery？
我不认为第一个选项是你想要的。你的按钮在“.more”里面吗？如果是这样，它将被隐藏...我想我需要知道您的 html 结构（包括按钮）是什么样的。
没问题。你能接受我的回答吗？（点击此答案旁边数字下方的复选标记）

【解决方案2】：

您可能想要 jQuery UI 选项卡 http://jqueryui.com/demos/tabs/ 或其他一些 jQuery 选项卡解决方案。

【讨论】：