點擊獲取列表p的內容並顯示在div中

Question

對jQuery有點麻煩，請大家幫忙。

我需要抓住P類的內容=「區域降序類=當」字幕被點擊，並在類=「臺階區域上顯示它

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區域顯示每個描述的方法。

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>"); 
}); 

---

更新：無腳本

文檔：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();