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时，是否可以使用相应隐藏字段中的值更新文本区域courseText？

如果单击 chap1link li，则会将 chap1value 的值加载到文本区域。

任何建议都将受到高度赞赏。谢谢!

Answer 1

尝试:

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

Sample

但是我建议使用以下 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());
});

Sample 2