具有多个 selection/click 选项的 JSTree 节点？

Question

我需要 JSTree 的最后一个节点水平地显示为单个按钮的列表。每个按钮都有一个不同的值，用于记录最后一个节点问题的分数。我不知道如何触发列表项内的单个项目单击事件。单击事件仅针对整个节点触发。

![屏幕截图gui设计]https://i.ibb.co/FKwDNFz/Capture.jpg

关于我如何完成这个的任何想法？见附图。

我曾尝试将答案选项添加为另一个要提问的子树，但这会垂直显示答案，我需要它们水平显示在节点的右侧。

我应该可以单独点击字母按钮。

<ul class="question">
<li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
<div class="row">
<div class="col-sm-8">
a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
</div>
<div class="col-sm-4 text-right">
<input type="radio" id="asm-input" hidden="hidden" value="" />

<a href="#!" data-value="1" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;/-A</a>
<a href="#!" data-value="2" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;A </a>
<a href="#!" data-value="3" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;/-</a>
<a href="#!" data-value="4" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B; </a>
<a href="#!" data-value="5" class="badge badge-pill badge-secondary asm-option align-middle">- </a>


</div>
</div>

</li>
</ul>
.
.
.

Answer 1

let links = [...document.body.querySelectorAll('a')];

links.map( link => {
    link.addEventListener('click', event => {
        let value = event.target.getAttribute('data-value');
        console.log(value);
    });
});

<ul class="question">
    <li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
        <div class="row">
            <div class="col-sm-8">
                a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
            </div>
            <div class="col-sm-4 text-right">
                <input type="radio" id="asm-input" hidden="hidden" value="" />

                <a id="ppp" href="#!" data-value="1" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;/-A</a>
                <a href="#!" data-value="2" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;A </a>
                <a href="#!" data-value="3" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B;/-</a>
                <a href="#!" data-value="4" class="badge badge-pill badge-secondary asm-option align-middle">&#x2B; </a>
                <a href="#!" data-value="5" class="badge badge-pill badge-secondary asm-option align-middle">- </a>

            </div>
        </div>

    </li>
</ul>

具有多个 selection/click 选项的 JSTree 节点？

JSTree node with multiple selection/click options?

javascript

jquery

html

jstree