提交时附加一个CSS块

Appending a block of CSS upon submit

本文关键字：一个 CSS 提交      更新时间：2023-09-26

http://jsfiddle.net/rfnslyr/CRqXm/1/

我有下面的fiddle，它提取CSS类和ID，并将它们发布到控制台。我想在顶部框中键入一个名称，粘贴一些代码，并让它在#classes实例的新实例中生成一组单独的唯一css ID和类（其中包含uin0CE+一堆类）。

我已经在控制台上发布了这篇文章，我只是不知道每次向#codeName添加新名称并向#codeInput添加代码时，如何在提交时"生成"#classes部分的新实例。

index.html

    <div id="container">
        <input id="codeName" class="boxsizingBorder"></input><br>
        <textarea id="codeInput" class="boxsizingBorder"></textarea><br>
        <button id="submitCode">submit</button>
        <div id="classes">
            <div class="pageTitle">uin0CE</div>
            <div class="cssClassesIDs">
ui-icon-nodisc,redDotClass,translate,test,ui-hide-label,ui-grid-a,ui-block-a,ui-block-b,alignRight,ui-grid-solo,ui-disabled,companyFieldset,longbutton,icon-map-marker,locationIcon,icon-phone,contactIcon,legalBlock,legal,legalDivider,signInInfoIcon,icon-info-sign,ui-icon-alt
            </div>
        </div>
    </div>
    <script src="functions.js"></script>

functions.js

$(function() {
    $('#submitCode').click(function() {
        var CSS_CLASSES = [];
        var CSS_IDS = [];
        var el = document.createElement( 'div' );
        var text = $("#codeInput").val();
        el.innerHTML = text;       
        var nodes = el.getElementsByTagName('*');
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.id.length > 0) {
                CSS_IDS.push.apply(CSS_IDS, node.id.split(" ")); 
            }
            if (node.className.length > 0) {
                CSS_CLASSES.push.apply(CSS_CLASSES, node.className.split(" "));   
            }
        }
        var uniqueNames = [];
        $.each (CSS_CLASSES, function(i, el){
            if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
        });     
        console.log(uniqueNames + " --- " + uniqueNames.length);
    });
});

编辑：我把这个添加到你的小提琴中：

 //Added this section here
    var name = $('#codeName').val();
    var code = uniqueNames;
    $('#classes').empty();
    $('#classes').append('<div class="pageTitle">'+name+'</div>');
    $('#classes').append('<div class="cssClassesIDs">'+code+'</div>');

这是最新的小提琴：http://jsfiddle.net/CRqXm/4/

我希望我能正确地回答你的问题，但这似乎正是你想要的。

相关文章：