Jquery 如何在敲除框中显示带有悬停文本的警告图标，以警告在文本框中输入的重复记录

我对Jquery和Knockout都是新手…我正在使用KO observable数组绑定网格中的数据（使用HTML表），当用户在文本框中输入KO数组中已经可用的相同值（数据已经显示在网格中）时，我想显示带有悬停文本的警告图标…我的消息应该显示以前的值和已经使用的步骤号。我有两个网格模板，一个用于显示记录，另一个用于编辑

脚本部分：

function UniqueViewModel(){
    var dataValues=ko.observableArray([{stepNo:1,stepText:"test1"},
                                       {stepNo:2,stepText:"test2"},
                                       {stepNo:3,stepText:"test3"},
                                       {stepNo:4,stepText:"test4"}])

}
ko.applyBindings(new UniqueViewModel());

HTML:

\\View模板
\\编辑模板

您可以创建一个自定义js类，该类将包含用于获取提示的计算可观察对象，而不是将普通js对象放入可观察数组：

function Step(no, text, parentObject) {
  var self = this;
  var parent = parentObject;

  self.stepNo = ko.observable(no);
  self.stepText = ko.observable(text);

  self.notUniqueHint = ko.computed(function () {
    var duplicate = ko.utils.arrayFirst(parent.dataValues(), function (item) {
      return item.stepText() == self.stepText() && item.stepNo() != self.stepNo();
    })

    if (duplicate) {
      return "Item is duplicated Step #" + duplicate.stepNo() + " with text - " + duplicate.stepText();
    }

    return "";
  });
}

function UniqueViewModel() {
  var self = this;
  self.dataValues = ko.observableArray();
  self.dataValues.push(new Step(1, "Test1", self));
  self.dataValues.push(new Step(2, "Test2", self));
  self.dataValues.push(new Step(3, "Test3", self));
}

ko.applyBindings(new UniqueViewModel());

并相应地更新html：

<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td data-bind="text: stepNo"></td>
      <td data-bind="text: stepText"></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td>
        <input type="text" data-bind="value: stepNo" />
      </td>
      <td>
        <input type="text" data-bind="value: stepText" />
        <img width='16px' data-bind="visible: notUniqueHint, attr: {title: notUniqueHint}" src='http://www.veryicon.com/icon/preview/System/Function/warning%2048%20Icon.jpg'
        />
      </td>
    </tr>
  </tbody>
</table>

这是工作小提琴：

---

另外，您的html有一些语法错误，我已经纠正了它们。

有点晚了，但我认为

notUniqueHint

总是正确的，因为它会将

步骤

与自身进行比较（除非

parent.dataValues

尚未包含此

步骤

）。

<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td data-bind="text: stepNo"></td>
      <td data-bind="text: stepText"></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td>
        <input type="text" data-bind="value: stepNo" />
      </td>
      <td>
        <input type="text" data-bind="value: stepText" />
        <img width='16px' data-bind="visible: notUniqueHint, attr: {title: notUniqueHint}" src='http://www.veryicon.com/icon/preview/System/Function/warning%2048%20Icon.jpg'
        />
      </td>
    </tr>
  </tbody>
</table>