创建动态切换

Question

我想创建动态开关并使用 jquery 和一些动态变量创建按钮对象，然后我希望 Html 对象附加到 Html 我不能在下面做 link 是我的代码访问 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>

Answer 1

您用来替换字符串的按钮代码应该是字符串，而不是 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>

Answer 2

我将代码更改为以下：

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

Answer 3

改变代码的打击部分

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/

Answer 4

您不需要使用 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>

创建动态切换

Create dynamic switchery

html

jquery

switchery