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>

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

全力以赴： -

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

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

1 个答案: