javascript - 具有未知 ID 的 Onclick 函数

Question

我正在尝试编写 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，传递(this)只能影响箭头，我怎样才能从那里开始影响该段落？

Answer 1

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

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

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

并使用 jQuery 控制点击:

$(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 .