Javascript 使用ObservalArray在单击绑定时切换值

我是个新手，不熟悉击倒和指导，但运气不好

我试图设置一组图像，使其行为类似于一组复选框。它们最初都应该在数组“self.brands”中设置为“true”，并具有类“.active”。单击事件时，我希望他们将其切换为true或false，并将类从.active设置为.deactive

数组“self.brands”表示4个属性。ID、imagepath、alt标记，已选中（true或false）。单击图像时，它应该切换真/假值，将css从.active{opacity:1}设置为deactive{opacity:0.2}

以下是self.brands可观察阵列：

self.brands = ko.observableArray([["1",'acdsee.jpg','ACD See',"true"], "2",'amazon.jpg','Amazon',"true"], ["3",'aol.jpg','AOL',"true"], ["4",'cisco.jpg','Cisco',"true"];

以下是图像的html：

<a href="#">Select All</a> | <a href="#">Deselect all</a>
<br />
<div id="brands">
<ul data-bind="foreach: brands" class="brands">
                  <li data-bind="click: $parent.setBrand,
               css: { active: $data == $root.chosenBrandId() }"><a href="javascript:void(0);" data-bind="click: $parent.setBrand"> <img data-bind="attr:{src: $data[1], alt: $data[2]}" /></a> 
               </li>
                </ul>
</div>

淘汰码：

self.chosenBrandId = ko.observable();

self.setBrand = function(brand) { 

self.chosenBrandId(brand); 
}; 

我在设置这个时遇到了问题。当前，当您单击图像时，它一次仅将.active类应用于一个图像。当我尝试获取self.chosenBrandId（brand）的值时，它返回[object，object]。因此，我不明白如何将chosenBrandID中的值设置为true，我尝试了

self.chosenBrandId(brand)[3];

但是它返回的是未定义的，所以我想知道如何设置值，甚至在返回[object，object]的“brand”变量中可以检索到哪些参数

希望它以以下方式运行：

1） 单击单个图像可在.active和.deactive类之间切换

2） 单击单个图像是否更改self.brands数组的布尔真/假值

---

3） 创建一个函数来更改所有图像css和数组值，从.active和true或.deactive和false，当您单击链接“全选”或“全选”时？

看起来您的css类“active”逻辑是错误的，您的代码一次只允许设置一个。 （看起来您还复制了单击绑定）

如果要切换这些类似的复选框，true/false属性应该是ko.observable。 我对代码进行了如下修改：

---

+1还有一点解释：

observearray

只观察数组包含哪些元素，而不是这些元素的状态。谢谢，你刚刚打开了我的世界！我对这段代码感到好奇：“$（“html”）[0]”来自ko.applyBindings（new Model（），$（“html”）[0]），它是如何被包括在内的？这是获取dom标记的jQuery方法。虽然在这种情况下并不特别需要，但我认为将您的KO模型绑定到dom的特定部分是一个好习惯。我仍然有点困惑，如何让“全选”和“取消全选”链接起作用，我了解这一部分，全选，如何设置函数selectAllBrands（）？这就是我在淘汰赛中感到困惑的地方。。。如果这是javascript，我会设置一个for循环来循环数组，并将active的所有值设置为true。。我不知道如何在淘汰赛中处理这个问题，请帮忙！！！：）

self.chosenBrandId(brand)[3];

var self = this;
self.brands = ko.observableArray([{
    id: "1",
    img: 'acdsee.jpg',
    name: 'ACD See',
    active: ko.observable(true)
}, {
    id: "2",
    img: 'amazon.jpg',
    name: 'Amazon',
    active: ko.observable(true)
}, {
    id: "3",
    img: 'aol.jpg',
    name: 'AOL',
    active: ko.observable(true)
}, {
    id: "4",
    img: 'cisco.jpg',
    name: 'Cisco',
    active: ko.observable(true)
}]);

self.setBrand = function (brand) {
    var state = !brand.active();
    brand.active(state);
};