javascript - 如何在点击时显示div？

Question

这应该相当简单，但我对 Javascript 不太熟悉，所以我遇到了困难。我有这个html:

<section class="main-container">
    <ul class="landing-list">
        <li class="main-headings">
            <strong>SERVICES</strong><i class="icon icon-angle-down"></i>
            <div class="main-blurb" id="blurb-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda, in a quaerat iusto. Reiciendis consequuntur doloribus, sed tenetur aspernatur sunt perspiciatis. Odit non eos laudantium fuga officiis quia eius!</p>
            </div>
        </li>
        <li class="main-headings">
            <strong>WHY CHOOSE PMDS?</strong><i class="icon icon-angle-down"></i>
            <div class="main-blurb" id="blurb-2">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo rerum totam obcaecati at eligendi voluptate tempore aspernatur. Maxime accusantium nobis ab, at voluptatem porro, fugit sed sint fugiat sapiente vel?</p>
            </div>
        </li>
        <li class="main-headings">
            <strong>PORTFOLIO</strong><i class="icon icon-angle-down"></i>
            <div class="main-blurb" id="blurb-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique aut voluptates, facilis, provident quae cupiditate dolore nisi non accusamus quidem dolorem dicta aliquam, quod temporibus. Quas deleniti, aliquam ab.</p>
            </div>
        </li>
        <li class="main-headings">
            <strong>CONTACT</strong><i class="icon icon-angle-down"></i>
            <div class="main-blurb" id="blurb-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, recusandae. Commodi, mollitia autem necessitatibus dicta. Explicabo quam harum, perferendis repellat vel aut, est fugit assumenda blanditiis ratione, doloribus molestiae consequuntur.</p>
            </div>
        </li>
    </ul>
</section>

我正在寻找的效果是，当单击其中一个 .icons 时，会显示其下方的 .main-blurb，而所有其他 .main-blurb 都会隐藏。这是我写的js:

$('section ul li .icon').click(function() {
    var i = $(this).index();
    $('.main-blurb').hide();
    $('#blurb-' + (i+1)).show();
});

我已将其放入 .js 文件中，并在我的 application.js 中需要它。当我运行这个时，什么也没有发生。我已经重新启动了服务器以及所有这些，我只是想知道是否缺少一些语法。

Answer 1

var i = $(this).index();始终等于 1，因为 .icon是每个 <li> 中的第二个元素.

尝试:

$('section ul li .icon').click(function() {
    $('.main-blurb').hide();
    $(this).parent().find('.main-blurb').show();
});