javascript - 无法使用可选择的 jQuery UI 获取选定的单词

Question

我正在尝试制作一个注释工具，我将在其中选择一些单词并获取它们在句子中的相对开头和索引。

我正在使用 jQuery UI 的可选工具来选择单词并从中获取它们的数据属性。

---

在这个例子中，我想选择拆分的词:(HELLO, ,, WORLD, 。 ) 并从中获取它们的数据属性。

---

我的 div(s) 层次结构如下:

#tblText > tbody > tr > td > #0 > div#div0.uiselectee.ui-selected

---

$(function() {
  $('#btnAddUtterance').click(function() {
    populateUtterance();
  });

  var selected1 = new Array();

  $(".tokenized").selectable({
    selected: function(event, ui) {
      debugger;
      alert(ui.selected.innerHTML);
      selected1.push(ui.selected.id);
    },
    unselected: function(event, ui) {
      //ui.unselected.id
    }
  });

  var uttIdx = 0;
  var tokenizedUtterances = new Array();

  function populateUtterance() {
    let userUtterance = $('#myInput').val();
    let tokenizedUtterance = tokenizeUtterance(userUtterance, uttIdx);
    let markup = `<tr><td><input type='checkbox' name='record'></td><td> ${tokenizedUtterance} </td> <td>${userUtterance}</td></tr>`;

    $("#tblText tbody").append(markup);
    uttIdx += 1;
    $('#myInput').val('');
  }


  $("#myInput").keyup(function(event) {
    if (event.keyCode === 13) {
      populateUtterance();
    }
  });




  function findSpacesIndex(utterance) {
    let index = 0;
    let spacesIndex = [];
    while ((index = utterance.indexOf(' ', index + 1)) > 0) {
      spacesIndex.push(index);
    }
    return spacesIndex;
  }

  function createUtteranceLookup(utterance) {
    let lookUpObject = new Array();
    utterance.replace(/[\w'-]+|[^\w\s]+/g, (word, offset) =>
      lookUpObject.push({
        word: word,
        start: offset,
        end: offset + word.length
      }));
    return lookUpObject;
  }

  function tokenizeUtterance(utterance) {
    let div = `<div id=${uttIdx} class ='tokenizedUtterance'>`;
    let spacesIndex = new Array();
    spacesIndex = findSpacesIndex(utterance);

    let utteranceLookup = new Array();

    for (let i = 0; i < spacesIndex.length; i++) {
      utteranceLookup.push({
        word: " ",
        start: spacesIndex[i],
        end: spacesIndex[i]
      });
    }

    let wordsIndex = [];
    wordsIndex = createUtteranceLookup(utterance);
    Array.prototype.push.apply(utteranceLookup, wordsIndex);

    utteranceLookup.sort(function(obj1, obj2) {
      return obj1.start - obj2.start;
    });

    for (let i = 0; i < utteranceLookup.length; i++)
      utteranceLookup[i]["wordIndexInSentence"] = i;

    $.each(wordsIndex, function(index, item) {
      let divId = "div" + index;
      let divStart = item.start;
      let divEnd = item.end;
      let divValue = item.word;

      div += `<div style="display:inline-block;margin:5px; border: 1px solid black;" id = "${divId}" data-start=${divStart} data-end= ${divEnd} data-value= "${divValue}"> ${item.word} </div >`;
    });


    tokenizedUtterances.push({
      UtteranceNumber: uttIdx,
      tokenizedUtteranceLookup: utteranceLookup
    });

    div += '</div>';
    $('#testOutput').html('');
    $('#testOutput').html(JSON.stringify(tokenizedUtterances, undefined, 2));
    utteranceLookup = new Array();
    return div;
  }


  $(document).on("click", '#tblText > tbody > tr > td:nth-child(2)', function(event) {
    //if ctrl key or left click is pressed, select tokenized word
    if (event.ctrlKey || event.which === 1) {
      $('.tokenizedUtterance').selectable();
    }
    console.log("Selected");
  });

  // Find and remove selected table rows
  $(document).on('click', '#btnDeleteRow', function(e) {
    $("#tblText tbody").find('input[name="record"]').each(function() {
      if ($(this).is(":checked")) {
        $(this).parents("tr").remove();
        $('#testOutput').html('');
      }
    });
  });
});

.tokenizedUtterance .ui-selecting {
        background: #FFFF99;
    }

.tokenizedUtterance .ui-selected {
        background: #FFFF00;
        font-family: 'Segoe UI';
        font-style: italic
    }

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h2>AnnotationView</h2>

<h2>Enter text to annotate</h2>

<input type="text" id="myInput" />
<button id="btnAddUtterance" class="btn btn-info">Add Utterance</button>

<table id="tblText" class="table table-hover">
  <thead>
    <tr>
      <th>Select</th>
      <th>Tokenized User Utterance</th>
      <th>Original Utterance</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<button id='btnDeleteRow' class='btn btn-danger'>Delete Utterance</button>


<span>You've selected:</span> <span id="select-result"></span>.

<hr />
<h1>Output is: </h1> <br />
<pre id="testOutput" style="word-wrap: break-word; white-space: pre-wrap;"></pre>

---

这是一个 Fiddle of the app

任何帮助将不胜感激。

Answer 1

我相信这就是您要找的 - PEN

我们可以在 Selectable Widget 中使用 selected 和 unselecting 事件。

选定的元素存储在变量 elem 中。希望您可以使用此变量访问数据变量并构造 JSON。请让我知道这是否有帮助。