Erstellen Sie dynamische Switchery

Question

Ich möchte dynamische switchery erstellen und erstellen und Button-Objekt mit jquery und einige dynamische Variable für diese dann möchte ich das HTML-Objekt an HTML anhängen Ich kann es nicht tun, unten ist mein Link Visit jsfiddle. net/eu3a0k3m/2/

meine js Codes:

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++); 

meine HTML-Codes:

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

Answer 1

Sie müssen eval nicht verwenden. Rufen Sie einfach den Switchery Konstruktor auf, nachdem Sie das Kontrollkästchen in die Seite eingefügt haben.

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

die Schaltfläche Code, den Sie mit der Zeichenfolge sind zu ersetzen sollte als tring, kein jquery Objekt.

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

änderte ich meinen Code unten:

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++); 

Die erste Schaltfläche der Elemente ändert sich in Switchery und andere nicht geändert.

Besuch: jsfiddle.net/eu3a0k3m/4

Answer 4

mit Änderung Schlag Codeabschnitt

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

An:

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

mein Problem gelöst ist

Besuch: jsfiddle .net/eu3a0k3m/5/