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

2023年10月30日 268次阅读

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

我认为实现这一目标的最佳方法是让Jquery函数将EE的唯一{entry_id}参数作为click事件的一部分,但我仍然在努力弄清楚与Jquery一起使用EE模板标签的语法/实现.我非常喜欢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},但无济于事.不确定它是否是解析顺序问题,语法问题,或者此方法是否被误导.任何和所有指导都非常感谢.

最佳答案 你不需要将你的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中的元素.

点赞