創建動態切換臺

我想創建動態切換臺和創建和按鈕對象與jQuery和一些動態變量爲此然後我希望Html對象追加到Html我不能這樣做下面鏈接是我的代碼訪問jsfiddle。淨/ 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>

來源

2017-06-04 alireza senator

嗨阿里，你需要在這裏對堆棧溢出您的文章的代碼 - 不只是鏈接到第三方網站。 –

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

來源

2017-06-04 18:48:02 Bor691

你與替換字符串的按鈕代碼應爲tring，而不是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>

來源

2017-06-04 15:35:24

我改變了我的代碼以下：

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

來源

2017-06-04 16:30:02

與代碼變更送風部

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/

來源

2017-06-04 16:53:11

創建動態切換臺

回答

相關問題