淘汰赛:如何在按钮点击时切换多个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);