无法通过jQuery UI Selectable获取选中单词，求标注工具开发帮助

我来帮你搞定这个标注工具的需求！用jQuery UI Selectable实现选中单词并提取它们的data属性其实很简单，咱们一步步来：

1. 确保单词元素的结构与属性正确 #

首先要把每个拆分后的单词（包括标点）都包裹在独立的元素里，并且给每个元素设置好你需要的data-start（相对起始位置）和data-index（索引）属性，比如：

<div class="sentence-selectable">
  <span class="word-item" data-start="0" data-index="0">HELLO</span>
  <span class="word-item" data-start="5" data-index="1">,</span>
  <span class="word-item" data-start="6" data-index="2">,</span>
  <span class="word-item" data-start="7" data-index="3">,</span>
  <span class="word-item" data-start="8" data-index="4">WORLD</span>
  <span class="word-item" data-start="13" data-index="5">.</span>
</div>

2. 初始化jQuery UI Selectable并绑定事件 #

接下来初始化Selectable组件，指定选中的目标是咱们的单词元素，然后在stop事件（用户完成选择后触发）里获取所有选中项的信息：

$(function() {
  $(".sentence-selectable").selectable({
    filter: ".word-item", // 只允许选中单词元素
    stop: function() {
      // 收集选中的单词信息
      const selectedWords = [];
      $(".ui-selected", this).each(function() {
        const wordData = {
          text: $(this).text(),
          startPosition: $(this).data("start"),
          index: $(this).data("index")
        };
        selectedWords.push(wordData);
      });

      // 这里可以把收集到的信息用于你的标注逻辑
      console.log("选中的单词信息：", selectedWords);
      // 比如：把信息提交到后端，或者在页面上展示标注结果
    }
  });
});

3. 可选：添加选中样式提升体验 #

为了让用户直观看到选中的单词，给选中状态加个样式：

.word-item {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 4px;
}
.ui-selected {
  background-color: #a8d1ff;
  border-radius: 3px;
}

关键说明 #

• 用stop事件而不是selected事件：因为selected会在每个元素被选中时触发一次，而stop是用户完成选择后只触发一次，更适合批量收集选中项的信息。
• $(this).find(".ui-selected")：确保只获取当前Selectable容器内的选中元素，避免页面上其他Selectable组件的干扰。
• data()方法：可以直接读取元素上的data-*属性，非常方便。

这样你就能轻松选中句子里的任意单词，获取它们的相对起始位置和索引啦！

内容的提问来源于stack exchange，提问作者Kunal Mukherjee