Question

我有3个按钮，点击后应该将一个不同的容器添加到

之外的空div中

<button id="a" data-bind="clickme" value="1">a</button>
<div id="empty1"> 
<button id="b" data-bind="clickme" value="2">b</button>
<div id="empty2">  
<button id="c" data-bind="clickme" value="3">c</button>
<div id="empty3"> 

<!-- the container below should replace the empty div -->
<div class="container" id="big_container" data-bind="visible : openContainer">
<p> Hello world !</p> 
</div>

所有按钮都可以通过一个敲除js数据绑定点击我连接并具有值和ID。

我想要做的是让按钮a被点击，它应该在empty1上显示容器，如果点击按钮2，它应该在empty2上显示大容器。容器由数据绑定器隐藏，因此只有在单击按钮时才会显示。

这是我正在使用的淘汰赛js功能

self.openContainer = ko.observable(false);
self.clickme= function(value){
   if(value == 1){
   // make the observable visible so the container should display
      self.openContainer(true);
   $("#empty1").load("big_container");
   }
}

我正在尝试jquery哪个不起作用，而且我尝试了淘汰js组件寄存器，但我不确定它是如何工作的。

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

你可以用jQuery这样做。请不要在这里将容器移动到您的空div，它不要只复制html内容。

＆＃13;

jQuery(document).on('click','button[data-bind]',function(){
  jQuery('div#empty'+jQuery(this).val()).html(jQuery('div.container')) ;
  jQuery('div.container').show() ;
}) ;

＆＃13;

div#empty1, div#empty2, div#empty3 {
  border:1px solid red ;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="a" data-bind="clickme" value="1">a</button>
<div id="empty1"> </div>
<button id="b" data-bind="clickme" value="2">b</button>
<div id="empty2"> </div>
<button id="c" data-bind="clickme" value="3">c</button>
<div id="empty3"> </div>

<!-- the container below should replace the empty div -->
<div class="container" id="big_container" style="display:none;">
<p> Hello world !</p> 
</div>

＆＃13;

Answer 2

使用knockout templates并使用ifs将它们添加到正确的空div中。有了这个，openContainer实际上是多余的

JS：

self.openContainer = ko.observable(false);
self.btnClicked = ko.observable();
self.clickme= function(value){
   self.btnClicked(value)
   if(value == 1){
       self.openContainer(true);
   }
}

HTML：

<button id="a" data-bind="clickme" value="1">a</button>
<!-- ko if: btnClicked() == 1 -->
<div id="empty1" data-bind="template: { name: 'big-container-template' }"></div> 
<!-- /ko -->
<button id="b" data-bind="clickme" value="2">b</button>
<!-- ko if: btnClicked() == 2 -->
<div id="empty2" data-bind="template: { name: 'big-container-template' }"></div>  
<!-- /ko -->
<button id="c" data-bind="clickme" value="3">c</button>
<!-- ko if: btnClicked() == 3 -->
<div id="empty3" data-bind="template: { name: 'big-container-template' }"> </div> 
<!-- /ko -->

<script type="text/html" id="big-container-template">
  <!-- the container below should replace the empty div -->
  <div class="container" id="big_container" data-bind="visible : openContainer">
  <p> Hello world !</p> 
  </div>
</script>

这个的干净版本将是：

self.container = ko.observable();
self.clickme= function(value){
   self.container(value)
}

HTML：

<!-- ko if: container() == 1 -->
<div data-bind="template: { name: 'big-container-template' }"></div> 
<!-- /ko -->

或

<div data-bind="visible: container() == 1, template: { name: 'big-container-template' }"></div>

脚本：

<script type="text/html" id="big-container-template">
  <div class="container">
      <p> Hello world !</p> 
  </div>
</script>

通过Jquery或knockout js

2 个答案: