jquery - クリックすると、リストpのコンテンツが取得され、divに表示されます

Question

jQueryで少し困っているので、助けてください。

class="caption がクリックされたときに p class="area-desc の内容を取得し、class="step-area に表示する必要があります。

html:

<ul id="main-areas" class="group">
                <li>
                    <div class="build-area">
                        <span class="caption bg">Planning</span>
                    </div>
                    <p class="area-desc">1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Arcitecture</span>
                    </div>
                    <p class="area-desc">2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Interior Design</span>
                    </div>
                    <p class="area-desc">3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Construction</span>
                    </div>
                    <p class="area-desc">4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
            </ul>
            <div class="step-area bg">

            </div>

jQuery:

$('span.caption').click(function() {
        var step = $('p.area-desc').html();
        $('.step-area').html("<p>" + step + "</p>");
    });

現時点では、コードは最初の p タグの内容を取得して目的の div に表示するだけです。

必要なのは、クリックするたびに .step-area に各説明を表示する方法です。

Answer 1

$('span.caption').click(function() {
    var step = $(this).parent().next().html();
    $('.step-area').html("<p>" + step + "</p>");
});

ページ読み込み時に最初の説明を表示するには:

$(document).ready(function() {
    $('.step-area').html("<p>" + $('.area-desc:first').html() + "</p>");
});

---

更新：noscript

ドキュメント: https://developer.mozilla.org/en-US/docs/HTML/Element/noscript

例：

<noscript>
  <style>
    /* override your styles here */
  </style>
</noscript>

Answer 2

var step = $(this).closest('p.area-desc').html();