htmlコンテンツを取得してjQueryで他の場所に表示する方法は？

Question

私は簡単なウェブカレンダーであるスキル向上の個人プロジェクトに取り組んでいます。私はjQueryをかなり新しくしていますので、私はこのプロジェクトを使って自分のスキルを向上させました。あなたが私の問題が何であるかを理解するために、私が何をしているのかを説明したいと思います。

私はその内部のスパンで31個のH1のを持ってはjQueryの

<h1 class="number"><span></span></h1> *31 

var date = 1; 
$('.number').each(function() { 
    $(this).find('span').html(date); 
    date++; 
}); 

を通じてコン​​テンツを取得し、私はこのスクリプトを使用して、リストから個々の日付を選択することができます。

$('.number').click(function() { 
    $(this).toggleClass("selected") 
     .siblings('.selected').removeClass("selected"); 
}); 

をそして今、私は別のH1を持っています（#big_date）は、選択した日付でフィードしたいページの他の場所、つまりリストの12番目を選択したときに#big_dateに12を表示したい場合はどうすればいいですか？ 事前に助けてくれてありがとう！

Answer 1

あなたはjQuery's .text() functionを使用することができます。

$('.number').click(function() { 
 
    $(this).toggleClass("selected") 
 
     .siblings('.selected').removeClass("selected"); 
 
    $('#big_date').text($('.selected').text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style>body{font-family:Arial,Helvetica,sans-serif}#big_date{background:#1d89fd;height:1.2em;line-height:1.3em;text-align:center;width:2em;color:#fff}.number{display: inline-block;margin:0;width:1.5em;height:1.5em;line-height:1.5em;text-align:center;padding:.5em;font-size:16px;border:1px solid #ddd;cursor:pointer;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;transition:all .15s ease}.number:hover{background:#eee}.selected{background: #555!important; color: #fff}.selected:hover{background: #666!important;}</style> 
 

 
<h1 id="big_date"></h1> 
 

 
<h1 class="number"><span>1</span></h1><h1 class="number"><span>2</span></h1><h1 class="number"><span>3</span></h1><h1 class="number"><span>4</span></h1><h1 class="number"><span>5</span></h1><h1 class="number"><span>6</span></h1><h1 class="number"><span>7</span></h1><h1 class="number"><span>8</span></h1><h1 class="number"><span>9</span></h1><h1 class="number"><span>10</span></h1><h1 class="number"><span>11</span></h1><h1 class="number"><span>12</span></h1><h1 class="number"><span>13</span></h1><h1 class="number"><span>14</span></h1><h1 class="number"><span>15</span></h1><h1 class="number"><span>16</span></h1><h1 class="number"><span>17</span></h1><h1 class="number"><span>18</span></h1><h1 class="number"><span>19</span></h1><h1 class="number"><span>20</span></h1><h1 class="number"><span>21</span></h1><h1 class="number"><span>22</span></h1><h1 class="number"><span>23</span></h1><h1 class="number"><span>24</span></h1><h1 class="number"><span>25</span></h1><h1 class="number"><span>26</span></h1><h1 class="number"><span>27</span></h1><h1 class="number"><span>28</span></h1><h1 class="number"><span>29</span></h1><h1 class="number"><span>30</span></h1><h1 class="number"><span>31</span></h1>