Javascript 使用敲除动态显示/隐藏元素

我有一个表，它有四列，即代码、名称、数量和价格。其中，我想动态更改Quantity列的内容/元素。通常，它应该显示元素，其中显示数量，当用户单击元素时，我希望显示元素，以便用户可以编辑数量。我正试图按照“示例2”来实现这一点

以下是我的代码：

页面视图模型

function OrderVM (vm) {
    var self = this;
    self.OrderNo= ko.observable(vm.OrderNo());   
    .....
    .....
    self.OrderedProducts = ko.observableArray([]);
    for (i = 0; i < vm.OrderedProducts().length; i++) {
        var p = new ProductVM(vm.OrderedProducts()[i]);
        self.OrderedProducts.push(p);
    }
    .....
}

function ProductVM(vm) {
    var self = this;

    self.Code = ko.observable(vm.Code());
    self.Name = ko.observable(vm.Name());
    self.Quantity = ko.observable(vm.Quantity());
    self.Price = ko.observable(vm.Price());
    self.IsEditing = ko.observable(false);

    this.edit = function () {
        self.IsEditing(true);
    }
}

函数OrderVM（vm）{
var self=这个；
self.OrderNo=ko.observable（vm.OrderNo（））；
.....
.....
self.OrderedProducts=ko.observearray（[]）；
对于（i=0；i

在我的Razor视图中我有以下代码：

<tbody data-bind="foreach:OrderedProducts">
<tr>
    <td class="lalign"><span data-bind="text:Code"/></td>
    <td class="lalign"><span data-bind="text:Name" /></td>
    <td class="ralign" style="padding:1px!important;">
        <span data-bind="visible: !IsEditing(), text: Quantity, click: edit"
            style="width:100%;float:left;text-align:right;padding-right:10px;" />
        <input data-bind="value: Quantity,visible:IsEditing,hasfocus:IsEditing"
               style="width:100%;text-align:right;padding-right:10px;" />
    </td>
    <td class="ralign rightbordernone" style="padding-right:20px!important;"><span data-bind="text:Price"/></td>
</tr>

在上面的代码中，当我单击表的Quantity列中的span元素时，会调用“edit”函数，“IsEdit”值设置为true，但在单元格中看不到输入元素。单击span元素后，如果我使用“Inspect element”查看html，我仍然可以只看到元素，而不是在我的视图中的屏幕上，我既看不到span元素，也看不到input元素

---

这是非常简单的逻辑，并按预期执行，但视图上的最终结果并不像预期的那样。有人能帮我找出上面代码的错误吗？

这个问题很棘手。这是因为

span

不是自动关闭元件。这将有助于：

<td>
    <span data-bind="visible: !IsEditing(), text: Quantity, click: edit"></span>
    <input data-bind="value: Quantity, visible: IsEditing, hasfocus: IsEditing" />
</td>

span{填充：5px；背景：粉红色；}

（点击“10”，例如演示数量。）

尝试将visible:IsEditing更改为visible:IsEditing（）。我尝试了“IsEditing（）”，但无法设置一个示例小提琴，以便轻松跟踪导致问题的原因。干杯你搞定了@Jeroen现在一切正常了。谢谢