jquery - 使用 EE 的 {entry_id} 参数来定位 Jquery 函数中的各个条目？

Question

我在多条目页面上有一个显示/隐藏 Jquery 函数，它可以切换每个条目的扩展内容的可见性。然而，它工作得很好，当单击“更多”链接时，它会同时切换所有条目的扩展内容。我希望调整 Jquery 函数以单独定位每个条目。

我认为实现此目的的最佳方法是让 Jquery 函数将 EE 独特的 {entry_id} 参数作为点击事件的一部分，但我仍在努力找出串联使用 EE 模板标签的语法/实现使用 Jquery。我非常是一个 Jquery 初学者。有人可以建议吗？

到位的 Jquery 如下:

function showMore(){

$('.more').hide();

$('.morelink a').click(function(e) {
$('.more').slideToggle('slow');
$('.morelink a').toggleClass("less");
$(this).text($(this).text() == 'Less' ? 'More' : 'Less');
e.preventDefault();
});
}

$(document).ready(function(){
showMore();
}); 

这会查找文本链接 (.morelink a) 的点击并滑动切换隐藏的 div (.more)，同时还会根据状态将所述链接的文本从“更多”切换到“更少”。请注意，此函数位于一个单独的模板中，该模板嵌入到页面加载中。

有问题的精简 html 很简单:

{exp:channel:entries channel=“x” limit"x"}

<div class=“content”>content</div>
<div class="more">more content</div>
<div class="morelink"><a href="#">More</a></div>

{/exp:channel:entries} 

我已经尝试了所有我能想到的排列和安排来让 {entry_id} 被识别，但没有成功。不确定这是否是解析顺序问题、语法问题，或者该方法是否只是被误导了。非常感谢任何和所有指导。

Answer 1

您不需要为此将 jQuery 与 EE 的 {entry_id} 绑定(bind)。

包装每个内容 block ，使其看起来像这样:

{exp:channel:entries channel=“x” limit"x"}
    <div class="content_block">
        <div class=“content”>content</div>
        <div class="more">more content</div>
        <div class="morelink"><a href="#">More</a></div>
    </div>
{/exp:channel:entries} 

然后将你的 jQuery 更改为:

function showMore() {
    $('.more').hide();

    $('.morelink a').click(function(e) {
        var block = $(this).parents('.content_block');
        block.find('.more').slideToggle('slow');
        block.find('.morelink a').toggleClass("less");
        $(this).text($(this).text() == 'Less' ? 'More' : 'Less');
        e.preventDefault();
    });
}

$(document).ready(function(){
    showMore();
}); 

现在，每次单击链接时，它只会引用其本地 content_block DIV 中的元素。