通過多個鏈接從多個隱藏字段更新1個文本區域

Question

基本布局：

<textarea id="courseText"></textarea>

<ul class="chapter-items">

    <li id="chap1link">Chapter 1</li>
    <input id="chap1value" type="hidden" value="I am he as you are he as you are me and we are all together" />

    <li id="chap2link">Chapter 2</li>
    <input id="chap2value" type="hidden" value="See how they run like pigs from a gun, see how they fly" />

    <li id="chap3link">Chapter 3</li>
    <input id="chap3value" type="hidden" value="I'm crying" />

</ul>

每當使用相應隱藏字段中的值單擊li時，是否可以更新textarea courseText ？

如果單擊chap1link li，它將chap1value的值加載到文本區域上。

任何建議將不勝感激。 謝謝！

Answer 1

嘗試：

$(".chapter-items li").click(function(){    
    $("#courseText").val($(this).next('input[type=hidden]').val());
});

樣品

但是我建議使用以下html標記（ ul內部的任何內容都必須在li ）

<ul class="chapter-items">
    <li id="chap1link">Chapter 1
    <input id="chap1value" type="hidden" value="I am he as you are he as you are me and we are all together" />    
    </li>
    <li id="chap2link">Chapter 2
     <input id="chap2value" type="hidden" value="See how they run like pigs from a gun, see how they fly" />
    </li>
    <li id="chap3link">Chapter 3
    <input id="chap3value" type="hidden" value="I'm crying" />
    </li>
</ul>

以及以下js代碼：

$(".chapter-items li").click(function(){    
    $("#courseText").val($(this).find('input[type=hidden]').val());
});

樣品2