javascript - 具有未知ID的Onclick函数

我正在尝试编写将在单击箭头时显示/隐藏段落的javascript。问题是，我正在生成标题列表，并且每个标题旁边是一个箭头。这是通过服务器上的循环生成的。通过时，代码没有ID。为了解决这个问题，我运行了以下JavaScript创建ID:

var countPosts = document.getElementsByClassName("jobs-article-holder-content-whole-teaser").length;
var myNewID = "article-holder-dropdown-"
for (var i = 0; i < countPosts; i++) {
    myNewID = "article-holder-dropdown-" + (i + 1);
    document.getElementsByClassName("jobs-article-holder-content-whole-teaser")[i].setAttribute("id", myNewID);
}

HTML是

loop
        <div class="jobs-article-holder-content-page">
            <div class="jobs-article-holder-content-whole">
                <div class="jobs-article-holder-content-whole-box">
                    <h3>$MenuTitle.RAW</h3>
                    <div class="job-article-holder-click-for-more-link">
                        &#x25B2;
                    </div>
                </div>
                <div class="jobs-article-holder-content-whole-teaser show">
                    <p class="jobs-article-holder-content-whole-teaser-content">$Teaser</p>
                </div>
            </div>
        </div>
end loop

为您提供视觉效果:

现在，我想弄清楚如何在我不知道ID的情况下单击箭头并隐藏/显示内容。有任何想法吗？

编辑:

我似乎无法绕过的一件事是，箭头位于一个div内，段落位于另一个div内，如何更改箭头并隐藏div，传递(此)只能影响箭头，我怎么能从那里去影响段落？

最佳答案

使用CSS控制元素的显示/隐藏:

.jobs-article-holder-content-whole-teaser.hide {
    display: none;
}

.jobs-article-holder-content-whole-teaser.show {
    display: block;
}

并使用jQuery控制click:

$(function () {
    $('.job-article-holder-click-for-more-link').on('click', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo。

如果您的元素是由JavaScript生成的，则需要事件委托(delegate):

$(function () {
    $('body').on('click', '.job-article-holder-click-for-more-link', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo。