淘汰赛在点击时切换活动类

Posted 2023-05-07

【中文标题】淘汰赛在点击时切换活动类

【英文标题】：Knockout toggle active class on click

【发布时间】：2014-06-16 15:31:27

【问题描述】：

我有一个淘汰赛应用程序，其中我有一个功能，可以根据所选选项显示/隐藏页面上的元素。已选择用于激活特定切换的按钮将具有“活动”类，以便它从其他按钮中“脱颖而出”并且清晰可见，这是所选选项。我的问题是我创建了一个剔除函数来切换活动类，但它触发了 所有 按钮而不是选定按钮的活动状态，我不知道为什么？

var viewModel = function()
    var self = this;
    self.isActive = ko.observable(false);
    self.toggleActive = function(data, event)
        self.isActive(!self.isActive()); //toggle the isActive value between true/false
    


<button data-bind="click: toggleActive, css : 'activeStyle' : isActive">Toggle Active</button>
<button data-bind="click: toggleActive, css : 'activeStyle' : isActive">Toggle Active</button>
<button data-bind="click: toggleActive, css : 'activeStyle' : isActive">Toggle Active</button>

小提琴：http://jsfiddle.net/amMup/5/

【问题讨论】：

既然您已经标记了 jQuery，您可能需要考虑使用 jQuery 的 toggleClass 函数：api.jquery.com/toggleClass

那是个错误；迅速修复。最好不要将敲除函数与 jquery 函数混合使用

【参考方案1】：

所有三个按钮只有一个视图模型。这意味着您只有一个所有按钮都绑定到的“isActive”标志。

改为使用一组项目和一个 foreach 循环来呈现每个项目。这是您的视图模型的调整版本：

var viewModel = function()
    var self = this;
    self.items = [
         isActive: ko.observable(false) ,
         isActive: ko.observable(false) ,
         isActive: ko.observable(false) 
        ];
    self.toggleActive = function(data, event)
        data.isActive(!data.isActive());//toggle the isActive value between true/false
    


var myModel = new viewModel();

ko.applyBindings(myModel);

并且 html 被简化了：

<div data-bind="foreach: items">
    <button data-bind="click: $parent.toggleActive, css : 'activeStyle' : isActive">Toggle Active</button>
</div>

注意使用$parent 来访问父级的binding context。当您在 foreach 循环中时，绑定上下文是从 foreach 循环中提取的单个项目。通过访问$parent，您可以“到达”包含items 属性的对象——在您的情况下，它是toggleActive 所在的视图模型。

这是一个更新的小提琴：http://jsfiddle.net/psteele/amMup/6/

【讨论】：

这太好了，谢谢。我现在如何着手让它在任何时候都只有一个活动按钮？

有许多不同的方法。对于此示例，您可以在 toggleActive 函数中执行此操作。循环遍历所有项目并将其 isActive 设置为 false，然后在“数据”项目上设置 isActive true (data.isActive(true))

【参考方案2】：

这是因为您将它们全部绑定到同一个可观察对象。

http://jsfiddle.net/Kohan/fdzqJ/

Js

var viewModel = function()
    var self = this;
    self.isActive1 = ko.observable(false);
    self.isActive2 = ko.observable(false);
    self.isActive3 = ko.observable(false);

    self.toggleActive = function(data)
        data(!data());
    


var myModel = new viewModel();

ko.applyBindings(myModel);

HTML

<button data-bind="click: function()toggleActive(isActive1), css : 'activeStyle' : isActive1">Toggle Active</button>
<button data-bind="click: function()toggleActive(isActive2), css : 'activeStyle' : isActive2">Toggle Active</button>
<button data-bind="click: function()toggleActive(isActive3), css : 'activeStyle' : isActive3">Toggle Active</button>

【参考方案3】：

另一种方式：

<button data-bind="click: function()setActive('1'), css:  buttonActive() == '1' ? 'active' : '' ">Toggle Active</button>

var viewModel = function()
    var self = this;
    self.buttonActive = ko.observable(false);
    self.buttonActive = function(index)
        self.buttonActive(index);
    


var myModel = new viewModel();

ko.applyBindings(myModel);