Question

我想用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>

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

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

Answer 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

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

创建动态切换

4 个答案: