Javascript 如何正确引用传入knockout.JS的当前元素的属性？

我正在做一个小小的反馈表，我对淘汰/jQuery游戏还不熟悉，所以我确信这是一个语法错误

目标/背景

• 我有一个反馈表，其中一部分包括反馈类型列表。我想使用的反馈类型的实际文本存储在LI标记的“Title”属性中
• 我想从表示反馈类型的一组li标记中的每一个传递一次onclick
• 我希望knockout接收这个带有调用元素的onclick事件
• 我希望ViewModel函数根据li的title属性的内容更新ViewModel的反馈类型
• 然后我想从所有列表中删除一个类，并将其应用于所选元素。
  • 我已经有了jQuery来做这件事；我只是想把它纳入模型更改中

到目前为止我所拥有的 HTML反馈表的相关部分（UL列表）：

要更改样式的当前jQuery（尚未链接到模型）：

我认为我需要添加到ViewModel，但不太有效：

self.updateFeedbackType = function (elementToChangeTo) {
    self.feedbackType($(elementToChangeTo).attr("title"));
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $(elementToChangeTo).addClass("feedbackItem-Highlighted");
};

这将导致反馈类型变成未定义的类型，并且视觉变化不会发生

---

我哪里做错了？谢谢你的帮助

我认为您只需要在vm的定义中使用该函数

下面是一个似乎有效的JSFIDLE：

更新：这里有一个更好地利用淘汰赛并正确实现目标的小提琴：

---

elementToChangeTo

返回反馈视图模型（与此相同），而不是单击的元素——行为与jQuery稍有不同

传递到

updateFeedbackType

的第二个参数将是一个事件，因此您可以使用

$（event.target）

获取对单击元素的引用

self.updateFeedbackType = function (view, event) {
    var $elementToChangeTo = $(event.target);
    self.feedbackType($elementToChangeTo.attr("title"));
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $elementToChangeTo.addClass("feedbackItem-Highlighted");
};

---

然而，@daedalus28解决了一个更大的问题，那就是您没有利用knockout.js的优势，并且使过程过于复杂。要解决这个过于简单的问题，您并不需要两者兼而有之。

+1对于使用JSFIDLE，我总是忘记这个很棒的工具。在我创建的这个修订版中，问题仍然很明显：问题似乎是可观测数据的更新。我认为这对我来说是个错误，因此jQuery从来没有启动过？到目前为止，这种方法并没有完全利用淘汰。通常，在编写淘汰代码时，会尽量避免手动操作DOM。这里有一个简化的提琴，展示了一个更通用的击倒方法来解决这个问题：daedalus28和@Kato：感谢击倒教育和解决方案。我想我应该将web字体图标引用（）转换为多维数组的一部分，该数组列出了选项及其对应的图标。这有意义吗？还是我又把它复杂化了？没关系，我肯定是太复杂了。现在我知道我能做什么了，我将重新评估我的css类名（无论如何更好），并根据通过$data选择的项目来选择它们。谢谢

$("#feedbackList li").click(function () {
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $(this).addClass("feedbackItem-Highlighted");
});

self.updateFeedbackType = function (elementToChangeTo) {
    self.feedbackType($(elementToChangeTo).attr("title"));
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $(elementToChangeTo).addClass("feedbackItem-Highlighted");
};

self.updateFeedbackType = function (view, event) {
    var $elementToChangeTo = $(event.target);
    self.feedbackType($elementToChangeTo.attr("title"));
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $elementToChangeTo.addClass("feedbackItem-Highlighted");
};