淘汰賽：如何在按鈕點擊時切換多個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);