具有未知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控制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生成，则需要事件委派：

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

Answer 2

您可以按如下方式访问<p>：

$(document).on("click",".job-article-holder-click-for-more-link",function(){
  $(this).parent().next().find("p");
}).