创建动态切换器答案

【问题标题】：Create dynamic switchery创建动态切换器
【发布时间】：2017-06-04 15:19:44
【问题描述】：

我想创建动态切换器并使用 jquery 和一些动态变量创建按钮对象然后我希望 Html 对象附加到 Html 我不能这样做下面的链接是我的代码访问jsfiddle.net/eu3a0k3m/2/

我的js代码：

var count = 3;
$("#btn").click(function(){
    CreateInlineChildWithSwitchery(++count);
});
function CreateInlineChildWithSwitchery (countOfChilds){

      var Integer_LastSwitcheryId = count;

      var btn = $('<input type="checkbox" id="js-switch' + Integer_LastSwitcheryId + '" class="js-switch' + Integer_LastSwitcheryId + ' js-check-change' + Integer_LastSwitcheryId + ' col-lg-3" data-switchery="true">');
console.log(btn)
$('#all-encyclopedia').append(
        $("#tpl ").html() 
                                  .replace(/{switchery}/g,btn)
      );

      eval("elem" + Integer_LastSwitcheryId.toString() + "=document.querySelector('#js-switch"+Integer_LastSwitcheryId.toString()+"')");

      eval("switchery" + Integer_LastSwitcheryId.toString() +"={elem" + Integer_LastSwitcheryId.toString() + ",  color: '#1AB394',secondaryColor: '#688ab0'}");

      eval("changeCheckbox" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change"+Integer_LastSwitcheryId.toString()+"')");

      eval("changeField" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change-field"+Integer_LastSwitcheryId.toString()+"')");


  }


  for(i=1;i<4;i++)
      CreateInlineChildWithSwitchery(count++);

我的 HTML 代码：

<script type="text/tpl" id="tpl">
{switchery}
</script>
<button id="btn">insert Switchery</button>
<div id="all-encyclopedia"></div>

【问题讨论】：

嗨 alireza，您需要在 Stack Overflow 上的帖子中包含代码 - 不要只链接到第三方网站。

标签： jquery html switchery

【解决方案1】：

您不需要使用eval。将复选框插入页面后，只需调用 Switchery 构造函数即可。

var count = 3;
$("#btn").click(function() {
  CreateInlineChildWithSwitchery(++count);
});

function CreateInlineChildWithSwitchery(id) {
  var btn = $('<input>').attr({
    id: 'js-switch' + id,
    type: 'checkbox',
    class: ['js-switch' + id, 'js-check-change' + id, 'col-lg3'].join(" "),
  }).data({
    switchery: true,
  })[0]

  $('#all-encyclopedia').append(
    $("#tpl").html().replace(/{switchery}/g, btn.outerHTML));

  new Switchery($('#' + 'js-switch' + id)[0], {
    color: '#1AB394',
    secondaryColor: '#688ab0'
  })
}


for (i = 1; i < 4; i++)
  CreateInlineChildWithSwitchery(count++);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css" rel="stylesheet"/>


<script type="text/tpl" id="tpl">
  {switchery}
</script>
<button id="btn">insert Switchery</button>
<div id="all-encyclopedia"></div>

【讨论】：

【解决方案2】：

您要替换字符串的按钮代码应该是字符串，而不是 jquery 对象。

var count = 3;
$("#btn").click(function() {
  CreateInlineChildWithSwitchery(count);
});

function CreateInlineChildWithSwitchery(countOfChilds) {

  var Integer_LastSwitcheryId = count;

  var btn = '<input type="checkbox" id="js-switch' + Integer_LastSwitcheryId + '" class="js-switch' + Integer_LastSwitcheryId + ' js-check-change' + Integer_LastSwitcheryId + ' col-lg-3" data-switchery="true">';
  console.log(btn)
  console.log($('#tpl').html())
  $('#all-encyclopedia').append(
    $("#tpl").html()
    .replace(/{switchery}/g, btn)
  );

  eval("elem" + Integer_LastSwitcheryId.toString() + "=document.querySelector('#js-switch" + Integer_LastSwitcheryId.toString() + "')");

  eval("switchery" + Integer_LastSwitcheryId.toString() + "={elem" + Integer_LastSwitcheryId.toString() + ",  color: '#1AB394',secondaryColor: '#688ab0'}");

  eval("changeCheckbox" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change" + Integer_LastSwitcheryId.toString() + "')");

  eval("changeField" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change-field" + Integer_LastSwitcheryId.toString() + "')");


}


for (i = 1; i < 4; i++)
  CreateInlineChildWithSwitchery(count++);

<link href="https://alireza-salehi.ir/switchery/switchery.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alireza-salehi.ir/switchery/switchery.js"></script>
<script type="text/tpl" id="tpl">
  {switchery}
</script>
<button id="btn">insert Switchery</button>
<div id="all-encyclopedia">

</div>

【讨论】：

【解决方案3】：

我将代码更改为以下：

HTML：

<link href="https://alireza-salehi.ir/switchery/switchery.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alireza-salehi.ir/switchery/switchery.js"></script>
<script type="text/tpl" id="tpl">
{switchery}
</script>
<button id="btn">insert Switchery</button>
<div id="all-encyclopedia">
  <input type="checkbox" id="js-switch1" class="js-switch1 js-check-change1 col-lg-3" data-switchery="true">
</div>

js:

var count = parseInt($("[data-switchery=true]:last").attr('id')[$("[data-switchery=true]:last").attr('id').length-1]) + 1;

var elem1 = document.querySelector('#js-switch1');
var switchery1 = new Switchery(elem1,
{
  color: '#1AB394',
  secondaryColor: '#688ab0'
});


$("#btn").click(function() {
  CreateInlineChildWithSwitchery(++count);
});

function CreateInlineChildWithSwitchery(countOfChilds) {

  var Integer_LastSwitcheryId = count;

  var btn = '<input type="checkbox" id="js-switch' + Integer_LastSwitcheryId + '" class="js-switch' + Integer_LastSwitcheryId + ' js-check-change' + Integer_LastSwitcheryId + ' col-lg-3" data-switchery="true">';

  $('#all-encyclopedia').append(
    $("#tpl").html()
    .replace(/{switchery}/g, btn)
  );

  eval("elem" + Integer_LastSwitcheryId.toString() + "=document.querySelector('#js-switch" + Integer_LastSwitcheryId.toString() + "')");

  eval("switchery" + Integer_LastSwitcheryId.toString() + "={elem" + Integer_LastSwitcheryId.toString() + ",  color: '#1AB394',secondaryColor: '#688ab0'}");
        console.log(window[ "switchery" + Integer_LastSwitcheryId.toString() ])
  eval("changeCheckbox" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change" + Integer_LastSwitcheryId.toString() + "')");

  eval("changeField" + Integer_LastSwitcheryId.toString() + "=document.querySelector('.js-check-change-field" + Integer_LastSwitcheryId.toString() + "')");


}


for (i = 1; i < 4; i++)
  CreateInlineChildWithSwitchery(count++);

元素的第一个按钮更改为 Switchery，其他未更改。

访问：jsfiddle.net/eu3a0k3m/4

【讨论】：

【解决方案4】：

修改代码段

eval("switchery" + Integer_LastSwitcheryId.toString() + "={elem" + Integer_LastSwitcheryId.toString() + ",  color: '#1AB394',secondaryColor: '#688ab0'}");

收件人：

var swicheryy = new Switchery(window[ "elem" + Integer_LastSwitcheryId.toString() ],{
  color: '#1AB394',
  secondaryColor: '#688ab0'
});

我的问题解决了

访问：jsfiddle.net/eu3a0k3m/5/

【讨论】：