Knockout.js 基于匹配索引添加禁用类

如果索引与单击的

a

标记不匹配，尝试“禁用”a

div

：

<div data-bind="foreach: slides" class="slidebtns">
    <a class="slidebtn" data-bind="text: title, click: $parent.activeIndex.bind($data, $index())" href="#"></a>
</div>

<div data-bind="foreach: slides">
    <div class="screen" data-bind="attr: { id: title }, disable: $parent.activeIndex() !== $index">
        <div>test</div>
    </div>
</div>

JS:

---

但是，我对KO来说太陌生了，无法理解如何在单击.slidebtn

a

时额外输出屏幕$index，这样我就可以实际检查索引是否相等（无论如何，它们应该相等，因为容器中每个元素类型只有3个）.

只需添加一个禁用绑定，它将为您的元素提供该类，而无需任何魔术-

<div data-bind="disable: $parent.activeIndex() !== $index"></div>

如果您必须为此使用类，那么您将使用CSS绑定处理程序，就像您之前提到的那样-

<div data-bind="css: { disabled: $root.activeIndex() !== $index ? }"></div>

然而，所有这些都表明，如果您试图隐藏它，如果它不匹配，那么只需使用可见绑定-

<div data-bind="visible: $parent.activeIndex() !== $index"></div>

除了PW Kad提到的问题之外，还有一个问题：
slideModel（）
没有做你认为它能做的事情，因为你开始编写它时，就好像它是一个“经典”构造函数，应该用
new
调用，但你并没有这样调用它。因此，在它内部，
self
实际上是全局对象（因为在一个没有被称为构造函数或方法的函数中，
这个
指的是全局对象）。因此，每次调用时，实际上都在设置名为
includeImage
和
imageSrc
的全局变量

替换

return { title: 'slide'+(n+1) };

与

或者用
new
调用它（在这种情况下，您应该将其重命名为
SlideModel
，因为标准惯例是经典构造函数以大写字母开头，以提醒您需要使用
new
），或者替换

var self = this;

与

并以

return self;

然后继续以当前的方式调用它。
简单得多，但它仍然不起作用，这让我觉得问题出在其他地方。将进行编辑以包含更多的代码。由于note$index听起来不像是要测试其值的有效属性，我将尝试创建一个div并将该属性绑定到text:binding以查看该值，可能对$parent.activeIndex（）执行相同的操作，然后您将能够看到它们何时具有相同的值。更新后，在我对最初从幻灯片数组创建的3个div的回答中包含了这一点：
0等于0？
，
0等于1？
，&
0等于2？
。这意味着第一张幻灯片是可见的，另外两张幻灯片是隐藏的，但它们都是可见的。此外，当单击my 3
a
元素中的任何一个时，第一个值将正确更新为0、1或2。这是因为您正在查找禁用的类而不是禁用的属性。disabled state的标准HTML属性是您应该使用的属性，而不是一类disabled，但我将更新答案以显示如何使用这两个属性。添加了一堆额外的答案，如果您试图做的只是隐藏它，如果它不匹配，那么您可以像我显示的上一个答案那样执行。
<div data-bind="css: { disabled: $root.activeIndex() !== $index ? }"></div>

<div data-bind="visible: $parent.activeIndex() !== $index"></div>

return { title: 'slide'+(n+1) };

self.title = 'slide'+(n+1);

var self = this;

var self = {};

return self;