javascript - 通过多个链接从多个隐藏字段更新 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 标记（a 中的任何内容都ul必须在 an 中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