AFLINK BUILDER TEST

by rough cheap

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="content p-4">
  <div id="aflinkItems" class="mb-4">
  </div>
  <div id="aflinkForms" class="mb-4">
  </div>
</div>

CSS

.hiddenForm {
  display: none;
}

.activeForm {
  display:block;
}

JavaScript

var AFLINK_ITEMS = {
	"Amazon" : "Amazon",
  "Pkobo" : "パソコン工房",
  "Rakuten" : "楽天"
};

for (const [key, value] of Object.entries(AFLINK_ITEMS)) {
	let cboElm = jQuery("<input>", {
  	type : 'checkbox',
    class : 'custom-control-input',
    name : 'use' + key,
    id : 'use' + key
  });
  let lblElm = jQuery("<label>", {
  	class : "custom-control-label",
    for : "use" + key,
    text : value
  });
  let divElm = jQuery('<div class="custom-control custom-switch"></div>');
  divElm.append(cboElm).append(lblElm);
  jQuery("#aflinkItems").append(divElm);
  
  let h3elm = jQuery("<h3>", {text : value});
  let cboPrimary = jQuery("<input>", {
  	type : 'radio',
    class : 'custom-control-input',
    name : 'afPrimary',
    id : 'af' + key + 'Primary'
  });
  let lblPrimary = jQuery('<label>', {
  	class : "custom-control-label",
    for : "af" + key + "Primary",
    text : "Primary"
  });
  let afTarea = jQuery('<textarea>', {
  	class : 'form-control',
    name : 'af' + key,
    id : 'af' + key,
    rows : '10'
  });
  let afLabel = jQuery('<label>', {
  	for : 'af' + key,
    text : 'アフィリエイトリンクをペースト'
  });
  let divPrimary = jQuery('<div class="form-group custom-control custom-switch">')
  	.append(cboPrimary).append(lblPrimary);
  let divAf = jQuery('<div class="form-group">')
    .append(afLabel).append(afTarea);
  let divForm = jQuery('<div>', {
  	class : 'hiddenForm',
    id : 'bl' + key
  });
  divForm.append(h3elm).append(divPrimary).append(divAf);
  jQuery('#aflinkForms').append(divForm);
  
  document.getElementById("use" + key).addEventListener('click', function(e) {
    const target = document.getElementById("bl" + key);
    if (this.checked) {
      if (!target.classList.contains('activeForm')) {
         target.classList.add('activeForm');
      }
      target.classList.remove('hiddenForm');
    } else {
      if (!target.classList.contains('hiddenForm')) {
      	target.classList.add('hiddenForm');
      }
     ...