0

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 中显示每个描述的方法。

4

2 回答 2

4 
$('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>");
});

更新：无脚本

文档：https ://developer.mozilla.org/en-US/docs/HTML/Element/noscript

例子：

<noscript>
  <style>
    /* override your styles here */
  </style>
</noscript>
于 2012-10-16T12:06:37.373 回答
0 
var step = $(this).closest('p.area-desc').html();
于 2012-10-16T12:06:34.427 回答