淘汰赛：如何在按钮点击时切换多个div的可见性？

Question

我想使用knockout来切换多个div的可见性。 以下是我的问题的粗略概念 -

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>

默认情况下，“Div 1”应该是可见的。

当我单击单个按钮时，它应该只显示基于单击按钮的相关div。

我已经完成了Knockout实例，但没有得到如何有效地做到这一点。

请帮忙！

Answer 1

以下将为您完成一项工作。 它并不理想，但应该为您提供一个平台。

首先，Knockout中的所有内容都与视图模型相关联。 您希望能够控制3个div的可见性，因此这是一个可能适合的视图模型。 就像我说的，不完美:)

var buttonVm = new function(){
  var self = this;
  // Flags for visibility
  // Set first to true to cover your "first should be open" req
  self.button1Visible = ko.observable(true);
  self.button2Visible = ko.observable(false);
  self.button3Visible = ko.observable(false);

  self.toggle1 =  function(){
     self.button1Visible(!self.button1Visible());
  }

  self.toggle2 =  function(){
     self.button2Visible(!self.button2Visible());
  }

  self.toggle3 =  function(){
     self.button3Visible(!self.button3Visible());
  }

}

您需要将标记更改为： -

<!-- events here.  When clicked call the referenced function -->
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>

<!-- Visibility set here -->
<div data-bind="visible: button1Visible"> Div 1 </div>
<div data-bind="visible: button2Visible"> Div 2 </div>
<div data-bind="visible: button3Visible"> Div 3 </div>

这里要注意几件事。 首先，我添加了type属性。 没有它，按钮的默认行为是尝试提交表单。

捆绑所有： -

// Create view model
var vm = new buttonVm();
ko.applyBindings(vm);