jQuery addClass example

Change class name on click in jQuery

by hbsto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
밀라노상인 - 가격 추적기 XML 생성기<br/><br/>

CSS

body {
  background: white;
  padding: 20px;
  font-size: 12px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

const $body = $('body');
const $cnt = $("<input type='number' name='cnt' value='20'>").width(40);
const $cycle = $("<input type='number' name='cnt' value='480'>").width(40);
const $file = $("<input type='file' name='xmlfile' accept='.xml'>");
const $edit = $("<textarea></textarea>").width(1500).height(100);
const $save = $("<input type='button' value='Save File'>").click(save);

$body.append('신규 UpdateCount : ', $cnt, '<br/>');
$body.append('신규 Cycle : ', $cycle, '<br/>');
$body.append('<br/>BrandSearch.xml 을 선택해 주세요.<br/><br/>', $file, '<br/><br/>');
$body.append('<br/>', $edit, '<br/>', $save);

$file.change(async ({ target }) => {

    try {

        if (!target.files.length) return false;

        const xml = await readXml(target.files[0]);

        target.value = '';

        const xmlString = generateXml(xml);
        
        $edit.val(xmlString);
        
    } catch (e) {
        alert(e);
    }

});

function save(){

	const xmlString = $edit.val();
	const blob = new Blob([xmlString], { type: "text/xml;charset=utf-8" });
        
  saveAs(blob, 'BrandSearch.xml', true);

}

// XML 생성
function generateXml(xml) {

    const $xml = $(xml);
    const defaults = { cnt: $cnt.val() | 0, cycle: $cycle.val() | 0 };
    const idList = [];
    const brandMap = {};
    const categoryMap = {};
    const brandList = [];
    const categoryList = [];
    const exists = {};

    $xml.find('BrandSearch').each((i, el) => {
        idList.push(el.getAttribute('FLWID'));
    });

    for (let id of idList) {

        $xml.find('SearchItem').each((i, el) => {

            const brand = el.getAttribute('BrandName').replace(/\&/g, '&amp;');
            const cat = el.getAttribute('Category');
            const cnt = el.getAttribute('UpdateCount');
            const cycle = el.getAttribute('Cycle');
            const key = id + '/' + brand + '/' + cat;

            if (!cat) return;

            brandMap[brand] = true;
            categoryMap[cat] = true;
           ...