Question

我在多条目页面上有一个show / hide Jquery函数，用于切换每个条目的扩展内容的可见性。但是，当单击“更多”链接时，它可以很好地切换所有条目的扩展内容。我希望调整Jquery函数来单独定位每个条目。

我认为实现这一目标的最佳方法是让Jquery函数将EE的唯一{entry_id}参数作为click事件的一部分，但我仍然在努力弄清楚串联使用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}联系起来。

换行每个内容块，使其如下所示：

{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中的元素。

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

1 个答案: