Javascript 如何进行onmouseover文本绑定？

当鼠标移到元素上时，如何将文本绑定到该元素

到目前为止，我已经：

self.books = ko.observable();
self.leftBooks = self.books() - self.allBooks();

对应视图：

---

当鼠标悬停在按钮上时，我想显示

leftBooks

变量。当鼠标悬停离开时，我想显示

books

变量。

为此使用

事件

绑定：

Html:

给你：

我所做的：

• 为“leftBooks”创建一个计算的可观察对象
• 为按钮标题创建一个计算的可观察对象
• 添加了一些字段，以便您可以测试它是否实际工作

代码：

---

编辑：Alexander对其答案的更新做了几乎相同的事情，但少了一个属性。在我看来，你是否想引入额外的可观看的“showLeftBooks”是一个品味问题。我觉得它使代码的意图更加清晰，但如果您愿意，可以完全省略它。

请查看并尝试一下。如果您遇到任何特定问题，请显示问题代码，并解释您被卡住的原因/位置。祝你好运@杰伦：我坚持到了这一点。我不知道如何更改绑定文本。我搜索了stackoverflow，但没有找到答案。我已经使用了

事件

绑定，但我不想更改变量值，我只想将元素的

text

binding变量从

books

更改为

leftBooks

如果我想在鼠标悬停时禁用按钮，如何访问

button

元素？在这种情况下，您应该禁用

绑定。从knockout viewModel访问dom元素是一种非常糟糕的做法。如果我想在鼠标悬停时禁用按钮，如何访问
按钮
元素？您想查看启用绑定。为什么你只会禁用悬停按钮呢？
<button data-bind="text: booksTitle, event: {mouseover: mouseOver, mouseout: mouseOut}"></button>

function ViewModel() {
    var self = this;
    self.books = ko.observable(10);
    self.allBooks = ko.observable(100);
    self.leftBooks = self.books() - self.allBooks();

    self.booksTitle = ko.observable(10);

    self.mouseOver = function () {
        self.booksTitle(self.leftBooks);
    }

    self.mouseOut = function () {
        self.booksTitle(self.books());
    }
}

self.allBooks = ko.observable(50);
self.books = ko.observable(10);
self.leftBooks = ko.computed(function () {
    return self.allBooks() - self.books();
});
self.showLeftBooks = ko.observable(false);
self.buttonText = ko.computed(function () {
    return self.showLeftBooks() ? self.leftBooks() : self.books();
});
self.mouseOver = function () {
    self.showLeftBooks(true);
}
self.mouseOut = function () {
    self.showLeftBooks(false);
}