создать эту HTML-разметку с Javascript (сложная запись DL Dt и DD)

0

Дорогие друзья StackOverflow, мне нужно сделать следующую запись разметки HTML в список определений "DL" через Javascript, чтобы я мог сделать запись динамически. Также необходимо отредактировать значения CSS. Я поместим запись CSS после HTML. В записи dd есть класс, якорь с классом, href, некоторый текст, другой якорь с классом и href. Я не знаю правильного синтаксиса для ввода этих Javascript. Большое спасибо за любую помощь. Маркандейа

 <dt class="Book2"><span>Book2</span></dt>

 <dd class="Book2"><a class="amazonLink" href="http://www.amazon.co.uk/Principles-Beautiful-Web-Design/dp/0975841963%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0975841963"><img src="http://ecx.images-amazon.com/images/I/41FxC9u%2B%2BVL._SL160_.jpg" alt=""></a><br>
<strong>Beautiful Web Design</strong> by Jason Beaird.<br>
This book teaches you a wide range of topics on how to make great web sites, covering layout styles, ratios and colour theory.<br>
<a class="publisherLink" href="#">Beautiful Web Design on SitePoint</a>
  </dd>

CSS-код для класса "Book2": (нужен синтаксис для редактирования записей через Javascript)

dl.bookshelf dt.Book2 {
    background: url(img/beautdesign-spine.png) 0 0 no-repeat,
    url(img/beautdesign-front.png) 40px 0 no-repeat;
    left:52px;
    width:280px;
    z-index:2;
}
  • 3
    Хорошо, так что вы пробовали до сих пор? Вы хотя бы знакомы с doccument.createTextNode document.createElement , doccument.createTextNode и .apendChild ? Если нет, исследуйте их и применяйте по мере необходимости.
Теги:

1 ответ

2
Лучший ответ

Не совсем то же самое. Поле publisher может быть остановлено, и изображение не требуется для ссылки на хранилище. Вы также можете установить класс из объекта JSON для ссылки в хранилище. desc - это массив, который преобразуется в ряд абзацев. Это может быть не совсем то, что вы хотите, но это должно по крайней мере обеспечить хороший запуск.

Во-первых, Javascript:

var books = [
    {
        title: 'Beautiful Web Design',
        author: 'Jason Beaird',
        link: {
            cls: 'amazonLink',
            href: 'http://www.amazon.co.uk/Principles...',
            img: 'http://ecx.images-amazon.com/images/...',
            text: 'View on Amazon'
        },
        publisher: {
            href: '#',
            name: 'SitePoint'
        },
        desc: [
            'This book teaches you...'
        ]
    }
];

var bookshelf = document.getElementById('bookshelf');

for(var i=0,l=books.length;i<l;i++) {
    var book = books[i];

    var dt = document.createElement('dt');

    var title = document.createElement('strong');
    title.appendChild(document.createTextNode(book.title));

    dt.appendChild(title);
    dt.appendChild(document.createTextNode(' by ' + book.author));

    var dd = document.createElement('dd');

    if(book.link.href !== null) {
        var link = document.createElement('a');
        link.setAttribute('class',book.link.cls);
        link.setAttribute('href',book.link.href);

        if(book.link.img !== undefined && book.link.img !== null) {
            var img = document.createElement('img');
            img.setAttribute('src',book.link.url);
            img.setAttribute('alt',book.link.text);

            link.appendChild(img);
        }
        else {
            link.appendChild(document.createTextNode(book.link.text));
        }

        dd.appendChild(link);
    }

    if(book.desc !== undefined && book.desc instanceof Array) {
        for(var j=0,k=book.desc.length;j<k;j++) {
            var p = document.createElement('p');
            p.appendChild(document.createTextNode(book.desc[j]));
            dd.appendChild(p);
        }
    }

    if(book.publisher !== undefined) {
        var pub = document.createElement('a');
        pub.setAttribute('class','publisherLink');
        pub.setAttribute('href',book.publisher.href);

        pub.appendChild(document.createTextNode(book.title + ' on ' + book.publisher.name));

        dd.appendChild(pub);
    }

    bookshelf.appendChild(dt);
    bookshelf.appendChild(dd);
}

Затем вывод HTML:

<dl id="bookshelf">
    <dt>
        <strong>Beautiful Web Design</strong> by Jason Beaird
    </dt>
    <dd>
        <a class="amazonLink" href="..."><img src="..." alt="View on Amazon"/></a>
        <p>
            This book teaches you...
        </p>
        <a class="publisherLink" href="#">Beautiful Web Design on SitePoint</a>
    </dd>
</dl>

Вы, вероятно, можете добавить классы и элементы здесь или там, чтобы сделать полученный HTML более описательным и более отзывчивым к CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню