通过 Jquery 或淘汰赛 js 在空 div 中获取 html 元素答案

【问题标题】：getting a html element in a empty div via Jquery or knockout js通过 Jquery 或淘汰赛 js 在空 div 中获取 html 元素
【发布时间】：2017-12-31 05:28:46
【问题描述】：

我有 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 组件注册，但我不确定它是如何工作的。

【问题讨论】：

标签： javascript jquery html knockout.js

【解决方案1】：

使用敲除 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>

【讨论】：

由于某种原因我的淘汰赛js找不到ko的结束标签
没有为它创造一个小提琴，但我认为这可能与我的淘汰赛版本有关
如果错误是cannot find the closing tag of ko。这意味着你错过了
一开始我也是这么想的，但至少三次检查过它在那里，我正在尝试不同的版本，希望它可以工作
刚刚注意到在我的示例中我缺少关闭 </div> 标签，如果您有相同的标签，这将导致相同的错误。这是在#empty div 上

【解决方案2】：

你可以用 jQuery 来做这件事。请注意，这会将容器移动到您的空 div，而不仅仅是复制 html 内容。

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

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

<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>

【讨论】：