master

分支 (5)

管理

管理

master

tuture

develop

feature

features/CCAO-1-lszt

learn
/
cardlist.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var datalist = [
            {
                "name": "介绍",
                "link": "./",
                "desc": "“我的生活”",
                "nameColor": "",
                "bgColor": ""
            },
            {
                "name": "介绍",
                "link": "./",
                "nameColor": "",
                "bgColor": ""
            },
            {
                "name": "介绍",
                "link": "./",
                "nameColor": "",
                "bgColor": ""
            }, {
                "name": "介绍",
                "link": "./",
                "nameColor": "",
                "bgColor": ""
            }, {
                "name": "介绍",
                "link": "./",
                "nameColor": "",
                "bgColor": ""
            }, {
                "name": "介绍",
                "link": "./",
                "nameColor": "",
                "bgColor": ""
            }]
        // 填写item.desc 时候 item.link 消失
        // 未填写item.desc 时候 显示 item.link
        // 怎么写
        // 将数据解析成DOM结构 - 普通卡片列表1
        function getCardLinkDOM(dataList) {
            console.log(JSON.stringify(dataList))
            let listDOM = ''
            dataList.forEach(item => {
                let bgColor = item.bgColor ? 'background-color:' + item.bgColor + ';' : ''
                let nameColor = item.nameColor ? 'color:' + item.nameColor + ';' : ''
                listDOM += [
                    item.desc ?
                        `<a href="${item.link}" title="${item.desc}" class="card-item" style="${bgColor}">` :
                        `<a class="card-item" style="${bgColor}">`,
                    `<p class="name" style="${nameColor}">${item.name}</p>`,
                    item.desc ? `</a>\n` : `</a>\n`].join("")
                // if (item.desc) {
                //     listDOM += [
                //         `<a title="${item.desc}" class="card-item" style="${bgColor}">`,
                //         `<p class="name" style="${nameColor}">${item.name}</p>`,
                //         `</a>\n`].join("")
                // } else {
                //     listDOM += [
                //         `<span class="card-item" style="${bgColor}">`,
                //         `<p class="name" style="${nameColor}">${item.name}</p>`,
                //         `</span>\n`].join("")
                // }
            })
            return listDOM
        }
        function getCardLinkDOM(dataList) {
            let listDOM = ''
            dataList.forEach(item => {
                let title = item.desc ? item.desc : item.link
                let bgColor = item.bgColor ? 'background-color:' + item.bgColor + ';' : ''
                let nameColor = item.nameColor ? 'color:' + item.nameColor + ';' : ''
                listDOM += [
                    `<a href="${item.link}" title="${title}" class="card-item" style="${bgColor}">`,
                    `<p class="name" style="${nameColor}">${item.name}</p>`,
                    `</a>\n`].join("")
            })
            return listDOM
        }
        function getCardLinksDOM(dataList, row) {

            let listDOM = ''
            dataList.forEach(item => {
                let avator = item.avatar ? '<img src="' + item.avatar + '" class="no-zoom">' : ''
                let nameColor = item.nameColor ? 'color:' + item.nameColor + ';' : ''
                let textColor = item.textColor ? 'color:' + item.textColor + ';' : ''
                let bgColor = item.bgColor ? 'background-color:' + item.bgColor + ';' : ''
                let row_value = row ? 'row-' + row : ''
                listDOM += [
                    `<${item.link ? 'a href="' + item.link + '" title="' + item.link + '" target="_blank" rel="noopener noreferrer"' : 'span'} class="card-item ${row_value}"style="${bgColor}"
      >${avator}<div>
          <p class="name" style="${nameColor}">${item.name}<OutboundLink /></p>
          <p class="desc" style="${textColor}">${item.desc}</p>
        </div>
      </${item.link ? 'a' : 'span'}>
    `]
            })
            return listDOM
        }

        console.log(getCardLinkDOM(datalist))
    </script>
    <a></a>
</body>

</html>