具有多个选择/单击选项的 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>