Jquery 创建动态交换机

我想用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++);

var计数=3；
$（“#btn”）。单击（函数（）{
CreateInlineChildWithSwitch（++计数）；
});
函数CreateInlineChildWithSwitch（countOfChilds）{
var Integer\u LastSwitcheryId=计数；
var btn=$（''）；
控制台日志（btn）
$（“#所有百科全书”）。追加(
$（“#tpl”）.html（）
.替换（/{switchery}/g，btn）
);
eval（“elem”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（“#js switch”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“switchery”+Integer_LastSwitcheryId.toString（）+“={elem”+Integer_LastSwitcheryId.toString（）+”，颜色：'#1AB394'，第二种颜色：'#688ab0'）；
eval（“changeCheckbox”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“changeField”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change field“+Integer\u LastSwitcheryId.toString（）+”）；
}
对于（i=1；i来说，要替换字符串的按钮代码应该是字符串，而不是jquery对象


var计数=3；
$（“#btn”）。单击（函数（）{
CreateInlineChildWithSwitch（计数）；
});
函数CreateInlineChildWithSwitch（countOfChilds）{
var Integer\u LastSwitcheryId=计数；
var btn=“”；
控制台日志（btn）
console.log（$（'#tpl'）.html（））
$（“#所有百科全书”）。追加(
$（“#tpl”）.html（）
.替换（/{switchery}/g，btn）
);
eval（“elem”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（“#js switch”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“switchery”+Integer_LastSwitcheryId.toString（）+“={elem”+Integer_LastSwitcheryId.toString（）+”，颜色：'#1AB394'，第二种颜色：'#688ab0'）；
eval（“changeCheckbox”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“changeField”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change field“+Integer\u LastSwitcheryId.toString（）+”）；
}
对于（i=1；i<4；i++）
CreateInlineChildWithSwitchy（count++）；

{switchery}
插入式开关柜
我将代码更改为：

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>


{switchery}
插入式开关柜

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=新开关厂（elem1，
{
颜色：“#1AB394”，
第二种颜色：“#688ab0”
});
$（“#btn”）。单击（函数（）{
CreateInlineChildWithSwitch（++计数）；
});
函数CreateInlineChildWithSwitch（countOfChilds）{
var Integer\u LastSwitcheryId=计数；
var btn=“”；
$（“#所有百科全书”）。追加(
$（“#tpl”）.html（）
.替换（/{switchery}/g，btn）
);
eval（“elem”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（“#js switch”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“switchery”+Integer_LastSwitcheryId.toString（）+“={elem”+Integer_LastSwitcheryId.toString（）+”，颜色：'#1AB394'，第二种颜色：'#688ab0'）；
console.log（窗口[“switchery”+整数\u LastSwitcheryId.toString（）]）
eval（“changeCheckbox”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change”+Integer\u LastSwitcheryId.toString（）+”）；
eval（“changeField”+Integer\u LastSwitcheryId.toString（）+”=document.querySelector（'.js check change field“+Integer\u LastSwitcheryId.toString（）+”）；
}
对于（i=1；i<4；i++）
CreateInlineChildWithSwitch（count++）；

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

访问：jsfiddle.net/eu3a0k3m/4
并更改代码部分

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

致：

我的问题解决了

访问：jsfiddle.net/eu3a0k3m/5/
您不需要使用
eval
。将复选框插入页面后，只需调用
Switchery
构造函数即可


var计数=3；
$（“#btn”）。单击（函数（）{
CreateInlineChildWithSwitch（++计数）；
});
函数CreateInlineChildWithSwitchy（id）{
变量btn=$（''）.attr({
id:'js开关'+id，
键入：“复选框”，
类：['js-switch'+id，'js-check-change'+id，'col-lg3'].join（“”），
}).数据({
切切瑞：没错，
})[0]
$（“#所有百科全书”）。追加(
$（“#tpl”）.html（）.replace（/{switchery}/g，btn.outerHTML））；
新交换机（$（'#'+'js-switch'+id）[0]{
颜色：“#1AB394”，
第二种颜色：“#688ab0”
})
}
对于（i=1；i<4；i++）
CreateInlineChildWithSwitchy（count++）；

{switchery}
插入式开关柜
Hi alireza，您需要在Stack Overflow上的帖子中包含代码-不要只链接到第三方网站。
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++);

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'
});