1

我正在网页上的几个地方生成一个随机图标。为了设置这些图标的样式,我使用Font Awesome作为列表。查看该链接,您可以看到每个图标都由一个样式类表示<i class="icon-[some-string]"></i>

目标是能够将代码放置在页面上,然后使用 jQuery 用该列表中的选项填充 [some-string]。所以一些伪例子,如:

<ul class="random-list">
  [for i]
    <li class="list-item"><i class="icon-string"></i></li>
    // Other content
  [end]
</ul>

然后我会使用 jQuery 从选项列表中更改字符串。我只是不知道如何做到这一点,如何创建对象数组,或者如何操作动态添加的项目。由于它们像上面的示例一样动态添加,我想我应该在它们生成时进行字符串替换,而不是在页面加载后这样做?这样做的过程是什么?我正在使用一个正在加载一些块的模板,我想在每个块之前包含随机图标。或者,如果更容易,我可以在每个块之前添加一个随机图标,但是,由于它们是由模板动态生成的,这会带来它自己的问题。

1)如何实现示例中的随机图标(基于模板) 2)或者,如果事后这样做更容易,我如何为每个块添加一个随机图标?

对于这个问题,任何一个答案都很好。

4

2 回答 2

2
$(document).ready(function() {
    var iconArray = new Array(
        "icon-compass",
      "icon-collapse",
      "icon-collapse-top",
      "icon-expand",
      "icon-eur",
      "icon-euro",
      "icon-gbp",
      "icon-usd",
      "icon-dollar",
      "icon-inr",
      "icon-rupee",
      "icon-jpy",
      "icon-yen",
      "icon-cny",
      "icon-renminbi",
      "icon-krw",
      "icon-won",
      "icon-btc",
      "icon-bitcoin",
      "icon-file",
      "icon-file-text",
      "icon-sort-by-alphabet",
      "icon-sort-by-alphabet-alt",
      "icon-sort-by-attributes",
      "icon-sort-by-attributes-alt",
      "icon-sort-by-order",
      "icon-sort-by-order-alt",
      "icon-thumbs-up",
      "icon-thumbs-down",
      "icon-youtube-sign",
      "icon-youtube",
      "icon-xing",
      "icon-xing-sign",
      "icon-youtube-play",
      "icon-dropbox",
      "icon-stackexchange",
      "icon-instagram",
      "icon-flickr",
      "icon-adn",
      "icon-bitbucket",
      "icon-bitbucket-sign",
      "icon-tumblr",
      "icon-tumblr-sign",
      "icon-long-arrow-down",
      "icon-long-arrow-up",
      "icon-long-arrow-left",
      "icon-long-arrow-right",
      "icon-apple",
      "icon-windows",
      "icon-android",
      "icon-linux",
      "icon-dribbble",
      "icon-skype",
      "icon-foursquare",
      "icon-trello",
      "icon-female",
      "icon-male",
      "icon-gittip",
      "icon-sun",
      "icon-moon",
      "icon-archive",
      "icon-bug",
      "icon-vk",
      "icon-weibo",
      "icon-renren",
      "icon-adjust",
      "icon-anchor",
      "icon-archive",
      "icon-asterisk",
      "icon-ban-circle",
      "icon-bar-chart",
      "icon-barcode",
      "icon-beaker",
      "icon-beer",
      "icon-bell",
      "icon-bell-alt",
      "icon-bolt",
      "icon-book",
      "icon-bookmark",
      "icon-bookmark-empty",
      "icon-briefcase",
      "icon-bug",
      "icon-building",
      "icon-bullhorn",
      "icon-bullseye",
      "icon-calendar",
      "icon-calendar-empty",
      "icon-camera",
      "icon-camera-retro",
      "icon-certificate",
      "icon-check",
      "icon-check-empty",
      "icon-check-minus",
      "icon-check-sign",
      "icon-circle",
      "icon-circle-blank",
      "icon-cloud",
      "icon-cloud-download",
      "icon-cloud-upload",
      "icon-code",
      "icon-code-fork",
      "icon-coffee",
      "icon-cog",
      "icon-cogs",
      "icon-collapse",
      "icon-collapse-alt",
      "icon-collapse-top",
      "icon-comment",
      "icon-comment-alt",
      "icon-comments",
      "icon-comments-alt",
      "icon-compass",
      "icon-credit-card",
      "icon-crop",
      "icon-dashboard",
      "icon-desktop",
      "icon-download",
      "icon-download-alt",
      "icon-edit",
      "icon-edit-sign",
      "icon-ellipsis-horizontal",
      "icon-ellipsis-vertical",
      "icon-envelope",
      "icon-envelope-alt",
      "icon-eraser",
      "icon-exchange",
      "icon-exclamation",
      "icon-exclamation-sign",
      "icon-expand",
      "icon-expand-alt",
      "icon-external-link",
      "icon-external-link-sign",
      "icon-eye-close",
      "icon-eye-open",
      "icon-facetime-video",
      "icon-female",
      "icon-fighter-jet",
      "icon-film",
      "icon-filter",
      "icon-fire",
      "icon-fire-extinguisher",
      "icon-flag",
      "icon-flag-alt",
      "icon-flag-checkered",
      "icon-folder-close",
      "icon-folder-close-alt",
      "icon-folder-open",
      "icon-folder-open-alt",
      "icon-food",
      "icon-frown",
      "icon-gamepad",
      "icon-gear",
      "icon-gears",
      "icon-gift",
      "icon-glass",
      "icon-globe",
      "icon-group",
      "icon-hdd",
      "icon-headphones",
      "icon-heart",
      "icon-heart-empty",
      "icon-home",
      "icon-inbox",
      "icon-info",
      "icon-info-sign",
      "icon-key",
      "icon-keyboard",
      "icon-laptop",
      "icon-leaf",
      "icon-legal",
      "icon-lemon",
      "icon-level-down",
      "icon-level-up",
      "icon-lightbulb",
      "icon-location-arrow",
      "icon-lock",
      "icon-magic",
      "icon-magnet",
      "icon-mail-forward",
      "icon-mail-reply",
      "icon-mail-reply-all",
      "icon-male",
      "icon-map-marker",
      "icon-meh",
      "icon-microphone",
      "icon-microphone-off",
      "icon-minus",
      "icon-minus-sign",
      "icon-minus-sign-alt",
      "icon-mobile-phone",
      "icon-money",
      "icon-moon",
      "icon-move",
      "icon-music",
      "icon-off",
      "icon-ok",
      "icon-ok-circle",
      "icon-ok-sign",
      "icon-pencil",
      "icon-phone",
      "icon-phone-sign",
      "icon-picture",
      "icon-plane",
      "icon-plus",
      "icon-plus-sign",
      "icon-plus-sign-alt",
      "icon-power-off",
      "icon-print",
      "icon-pushpin",
      "icon-puzzle-piece",
      "icon-qrcode",
      "icon-question",
      "icon-question-sign",
      "icon-quote-left",
      "icon-quote-right",
      "icon-random",
      "icon-refresh",
      "icon-remove",
      "icon-remove-circle",
      "icon-remove-sign",
      "icon-reorder",
      "icon-reply",
      "icon-reply-all",
      "icon-resize-horizontal",
      "icon-resize-vertical",
      "icon-retweet",
      "icon-road",
      "icon-rocket",
      "icon-rss",
      "icon-rss-sign",
      "icon-screenshot",
      "icon-search",
      "icon-share",
      "icon-share-alt",
      "icon-share-sign",
      "icon-shield",
      "icon-shopping-cart",
      "icon-sign-blank",
      "icon-signal",
      "icon-signin",
      "icon-signout",
      "icon-sitemap",
      "icon-smile",
      "icon-sort",
      "icon-sort-by-alphabet",
      "icon-sort-by-alphabet-alt",
      "icon-sort-by-attributes",
      "icon-sort-by-attributes-alt",
      "icon-sort-by-order",
      "icon-sort-by-order-alt",
      "icon-sort-down",
      "icon-sort-up",
      "icon-spinner",
      "icon-star",
      "icon-star-empty",
      "icon-star-half",
      "icon-star-half-empty",
      "icon-star-half-full",
      "icon-subscript",
      "icon-suitcase",
      "icon-sun",
      "icon-superscript",
      "icon-tablet",
      "icon-tag",
      "icon-tags",
      "icon-tasks",
      "icon-terminal",
      "icon-thumbs-down",
      "icon-thumbs-down-alt",
      "icon-thumbs-up",
      "icon-thumbs-up-alt",
      "icon-ticket",
      "icon-time",
      "icon-tint",
      "icon-trash",
      "icon-trophy",
      "icon-truck",
      "icon-umbrella",
      "icon-unchecked",
      "icon-unlock",
      "icon-unlock-alt",
      "icon-upload",
      "icon-upload-alt",
      "icon-user",
      "icon-volume-down",
      "icon-volume-off",
      "icon-volume-up",
      "icon-warning-sign",
      "icon-wrench",
      "icon-zoom-in",
      "icon-zoom-out",
      "icon-bitcoin",
      "icon-btc",
      "icon-cny",
      "icon-dollar",
      "icon-eur",
      "icon-euro",
      "icon-gbp",
      "icon-inr",
      "icon-jpy",
      "icon-krw",
      "icon-renminbi",
      "icon-rupee",
      "icon-usd",
      "icon-won",
      "icon-yen",
      "icon-align-center",
      "icon-align-justify",
      "icon-align-left",
      "icon-align-right",
      "icon-bold",
      "icon-columns",
      "icon-copy",
      "icon-cut",
      "icon-eraser",
      "icon-file",
      "icon-file-alt",
      "icon-file-text",
      "icon-file-text-alt",
      "icon-font",
      "icon-indent-left",
      "icon-indent-right",
      "icon-italic",
      "icon-link",
      "icon-list",
      "icon-list-alt",
      "icon-list-ol",
      "icon-list-ul",
      "icon-paper-clip",
      "icon-paperclip",
      "icon-paste",
      "icon-repeat",
      "icon-rotate-left",
      "icon-rotate-right",
      "icon-save",
      "icon-strikethrough",
      "icon-table",
      "icon-text-height",
      "icon-text-width",
      "icon-th",
      "icon-th-large",
      "icon-th-list",
      "icon-underline",
      "icon-undo",
      "icon-unlink",
      "icon-angle-down",
      "icon-angle-left",
      "icon-angle-right",
      "icon-angle-up",
      "icon-arrow-down",
      "icon-arrow-left",
      "icon-arrow-right",
      "icon-arrow-up",
      "icon-caret-down",
      "icon-caret-left",
      "icon-caret-right",
      "icon-caret-up",
      "icon-chevron-down",
      "icon-chevron-left",
      "icon-chevron-right",
      "icon-chevron-sign-down",
      "icon-chevron-sign-left",
      "icon-chevron-sign-right",
      "icon-chevron-sign-up",
      "icon-chevron-up",
      "icon-circle-arrow-down",
      "icon-circle-arrow-left",
      "icon-circle-arrow-right",
      "icon-circle-arrow-up",
      "icon-double-angle-down",
      "icon-double-angle-left",
      "icon-double-angle-right",
      "icon-double-angle-up",
      "icon-hand-down",
      "icon-hand-left",
      "icon-hand-right",
      "icon-hand-up",
      "icon-long-arrow-down",
      "icon-long-arrow-left",
      "icon-long-arrow-right",
      "icon-long-arrow-up",
      "icon-backward",
      "icon-eject",
      "icon-fast-backward",
      "icon-fast-forward",
      "icon-forward",
      "icon-fullscreen",
      "icon-pause",
      "icon-play",
      "icon-play-circle",
      "icon-play-sign",
      "icon-resize-full",
      "icon-resize-small",
      "icon-step-backward",
      "icon-step-forward",
      "icon-stop",
      "icon-youtube-play",
      "icon-ambulance",
      "icon-h-sign",
      "icon-hospital",
      "icon-medkit",
      "icon-plus-sign-alt",
      "icon-stethoscope",
      "icon-user-md"
    );
    var randIcon = Math.floor(Math.random()*(iconArray.length));
    $('.icon-front').append("<i class='" + iconArray[randIcon] + "'></i>");
    console.log(randIcon);
});

似乎可以解决问题,但是,让它在动态元素上工作将需要延迟或其他东西,除非我能确定这个片段在元素创建模板中运行......

于 2013-10-11T20:02:41.447 回答
0

更新最近的 Font Awesome 选择器标签:

$(文档).ready(函数() {
        var iconArray = new Array("glass"、"music"、"search"、"envelope-o"、"heart"、"star"、"star-o"、"user"、"film"、"th-large ", "th", "th-list", "check", "remove", "close", "times", "search-plus", "search-minus", "power-off", "signal", “gear”、“cog”、“trash-o”、“home”、“file-o”、“clock-o”、“road”、“下载”、“arrow-circle-o-down”、“arrow -circle-o-up", "inbox", "play-circle-o", "rotate-right", "repeat", "refresh", "list-alt", "lock", "flag", "headphones ", "音量关闭”、“音量减小”、“音量增大”、“二维码”、“条形码”、“标签”、“标签”、“书”、“书签”、“打印”、“相机”、“字体”、“粗体”、“斜体”、“文本高度”、“文本宽度”、“左对齐”、“居中对齐”、“右对齐”、“对齐对齐”、“列表” , "dendent", "outdent", "indent", "video-camera", "photo", "image", "picture-o", "pencil", "map-marker", "adjust", "tint" , "edit", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "后退”、“播放”、“暂停”、“停止”、“前进”、“快进”、“前进”、“弹出”、“V形左”、“V形右”、“加-圈子”、“减号圈”、“时间圈”、“检查圈”、“问题圈”、“信息圈”、“十字准线”、“时间圈-o”、“检查圈- o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "mail-forward", "share", "expand", "compress", "加号”、“减号”、“星号”、“感叹号”、“礼物”、“叶子”、“火”、“眼睛”、“眼睛斜线”、“警告”、“感叹号三角形”、“平面”、“日历”、“随机”、“评论”、“磁铁”、“雪佛龙向上”、“雪佛龙向下”、“转发”、“购物车”、“文件夹” ”,“文件夹打开”,“箭头-v”,“箭头-h”,“条形图-o”,“条形图”,“twitter-square”,“facebook-square”,“相机复古", "key", "gears", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out "、"linkedin-square"、"thumb-tack"、"external-link"、"登录"、"奖杯"、"github-square"、"上传"、"lemon-o"、"电话"、“square-o”、“bookmark-o”、“phone-square”、“twitter”、“facebook-f”、“facebook”、“github”、“解锁”、“信用卡”、“rss”、 “hdd-o”、“扩音器”、“铃铛”、“证书”、“hand-o-right”、“hand-o-left”、“hand-o-up”、“hand-o-down”、 “左箭头”、“右箭头”、“向上箭头”、“向下箭头”、“地球”、“扳手”、“任务”、“过滤器”、“公文包” ", "arrows-alt", "group", "users", "chain", "link", "cloud", "flask", "cut", "scissors", "copy", "files-o", "回形针”、“保存”、“软盘-o”、“正方形”、“navicon”、“重新排序”、“条形图”、“list-ul”、“list-ol”、“删除线”、“下划线”、“表”、“魔术”、“卡车”、“pinterest”、“pinterest-square”、“google-plus-square”、“google-plus”、“money”、“caret-down”、“caret-up” , "caret-left", "caret-right", "columns", "unsorted", "sort", "sort-down", "sort-desc", "sort-up", "sort-asc", "信封”,“linkedin”,“向左旋转”,“撤消”,“法律”,“木槌”,“仪表板”,“转速表”,“评论-o”,“comments-o”、“flash”、“bolt”、“sitemap”、“umbrella”、“paste”、“剪贴板”、“lightbulb-o”、“exchange”、“cloud-download”、“cloud-upload” ”、“user-md”、“听诊器”、“手提箱”、“bell-o”、“咖啡”、“餐具”、“file-text-o”、“building-o”、“hospital-o”、 “救护车”、“医疗包”、“战斗机”、“啤酒”、“h-square”、“plus-square”、“angle-double-left”、“angle-double-right”、“angle-double -up”、“angle-double-down”、“angle-left”、“angle-right”、“angle-up”、“angle-down”、“desktop”、“laptop”、“tablet”, "mobile-phone", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "mail-reply", "reply", "github- alt”、“文件夹-o”、“文件夹-打开-o”、“微笑-o”、“皱眉-o”、“meh-o”、“游戏手柄”、“键盘-o”、“标志-o” ,“标志检查”,“终端”,“代码”,“邮件回复全部”,“回复全部”,“星半空”,“星半满”,“星半- o", "location-arrow", "crop", "code-fork", "unlink", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "橡皮擦", "拼图”、“麦克风”、“麦克风斜线”、“盾牌”、“日历-o”、“灭火器”、“火箭”、“maxcdn”、“雪佛龙-左圆”、“雪佛龙- circle-right"、"chevron-circle-up"、"chevron-circle-down"、"html5"、"css3"、"anchor"、"unlock-alt"、"bullseye"、"ellipsis-h"、" ellipsis-v”、“rss-square”、“play-circle”、“ticket”、“minus-square”、“minus-square-o”、“level-up”、“level-down”、“check-正方形”、“铅笔正方形”、“外部链接正方形”、“共享正方形”、“指南针”、“向下切换”、“插入符号正方形-o-down”、“向上切换”、"caret-square-o-up", "toggle-right", "caret-square-o-right", "euro", "eur", "gbp", "dollar", "usd", "rupee", “inr”、“cny”、“rmb”、“yen”、“jpy”、“ruble”、“rouble”、“rub”、“won”、“krw”、“bitcoin”、“btc”、“file” ", "文件文本", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort -numeric-desc"、"thumbs-up"、"thumbs-down"、"youtube-square"、"youtube"、"xing"、"xing-square"、"youtube-play"、"dropbox"、"stack -溢出”,“instagram”、“flickr”、“adn”、“bitbucket”、“bitbucket-square”、“tumblr”、“tumblr-square”、“long-arrow-down”、“long-arrow-up”、“long-左箭头”、“长箭头右”、“苹果”、“windows”、“android”、“linux”、“dribbble”、“skype”、“foursquare”、“trello”、“female”、“ male", "gittip", "gratipay", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-交换”,“箭头-圆-o-右”,“箭头-圆-o-左”,“切换-左”,“插入符号-正方形-o-左”,“点-圆-o”,“轮椅”、“vimeo-square”、“turkish-lira”、“try”、“plus-square-o”、“航天飞机”、“slack”、“envelope-square”、“wordpress”、“openid” ,“机构”,“银行”,“大学”,“砂浆板”,“毕业帽”,“雅虎”,“谷歌”,“reddit”,“reddit-square”,“stumbleupon-circle”,“ stumbleupon”、“美味”、“digg”、“pied-piper”、“pied-piper-alt”、“drupal”、“joomla”、“语言”、“传真”、“建筑”、“孩子”、“爪子”,“勺子”,“立方体”,“立方体”,“behance”,“behance-square”,“蒸汽”,“steam-square"、"recycle"、"automobile"、"car"、"cab"、"taxi"、"tree"、"spotify"、"deviantart"、"soundcloud"、"database"、"file-pdf- o”、“file-word-o”、“file-excel-o”、“file-powerpoint-o”、“file-photo-o”、“file-picture-o”、“file-image-o” , "file-zip-o", "file-archive-o", "file-sound-o", "file-audio-o", "file-movie-o", "file-video-o", " file-code-o”、“vine”、“codepen”、“jsfiddle”、“life-bouy”、“life-buoy”、“life-saver”、“support”、“life-ring”、“circle- o-notch”、“ra”、“rebel”、“ge”、“帝国”、“git-square”、“git”、“黑客新闻”、“腾讯微博”、“qq”、“微信”、“微信”、“发送”、“纸飞机”、“发送- o", "paper-plane-o", "history", "genderless", "circle-thin", "header", "paragraph", "slider", "share-alt", "share-alt-square" 、“炸弹”、“足球-o”、“足球-o”、“tty”、“双筒望远镜”、“插头”、“幻灯片共享”、“抽搐”、“yelp”、“报纸-o”、“ wifi”、“计算器”、“paypal”、“google-wallet”、“cc-visa”、“cc-mastercard”、“cc-discover”、“cc-amex”、“cc-paypal”、“cc-stripe”、“bell-slash”、“bell-slash-o”、“垃圾”、“版权”、“at”、“吸管”、“画笔”、“生日蛋糕”、“区域” -chart”、“饼图”、“折线图”、“lastfm”、“lastfm-square”、“toggle-off”、“toggle-on”、“bicycle”、“bus”、“ioxhost”、 “angellist”、“cc”、“shekel”、“sheqel”、“ils”、“meanpath”、“buysellads”、“connectdevelop”、“dashcube”、“forumbee”、“leanpub”、“sellsy”、“shirtsinbulk ", "simplybuilt", "skyatlas", "cart-plus", "cart-arrow-down", "diamond", "ship", "user-secret”, “motorcycle”, “street-view”, “heartbeat”, “venus”, “mars”, “mercury”, “transgender”, “transgender-alt”, “venus-double”, “mars-双”,“金星-火星”,“火星-中风”,“火星-中风-v”,“火星-中风-h”,“中性”,“facebook-official”,“pinterest-p”,“whatsapp” ,“服务器”,“用户加”,“用户时间”,“酒店”,“床”,“viacoin”,“火车”,“地铁”,“媒体”);venus-double”、“mars-double”、“venus-mars”、“mars-stroke”、“mars-stroke-v”、“mars-stroke-h”、“neuter”、“facebook-official”、“ pinterest-p”、“whatsapp”、“server”、“user-plus”、“user-times”、“hotel”、“bed”、“viacoin”、“train”、“subway”、“medium”);venus-double”、“mars-double”、“venus-mars”、“mars-stroke”、“mars-stroke-v”、“mars-stroke-h”、“neuter”、“facebook-official”、“ pinterest-p”、“whatsapp”、“server”、“user-plus”、“user-times”、“hotel”、“bed”、“viacoin”、“train”、“subway”、“medium”);
    var randIcon = Math.floor(Math.random()*(iconArray.length));
        $('.icon-front').append("");
        控制台.log(randIcon);
    });
于 2015-02-19T14:29:26.510 回答