Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2018, 06:36
Новичок на форуме
Отправить личное сообщение для Biglu Посмотреть профиль Найти все сообщения от Biglu
 
Регистрация: 19.11.2018
Сообщений: 3

Вывод ссылок в html коде
Уважаемые форумчане! Помогите дописать правильный вывод ссылок в скрипте.
Есть скрипт, написанный одним человеком и доработанный другим участником данного форума.
Суть такая:
В поле Images вводится ссылка и отображается в html коде (справа) как img src... в двух местах.
В поле Links вводится другая ссылка и отображается в html коде (справа) a href=... между ссылками img src.
При вводе по одной ссылке в оба поля (images, links) все работает исправно (как надо). Проблема в том, что когда ссылки в оба поля вводятся от 2х и более, вывод становится не корректный и ссылка a href подписывается один раз в конце кода.
Необходимо, что бы при вводе ссылок в поля images и links (кол-во ссылок одинаковое) , выдавало html код вида img src.... a href.... img src... (вообщем так же, как при вводе в поля по одной ссылке).
Надеюсь понятно объяснил и надеюсь на вашу помощь!
Вот скрипт:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML output</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css">
</head>
<body class="pt-5">
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="h3 pb-5">Generate HTML Template</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
                <div class="form-group">
                    <label for="title">Title:</label>
                    <input id="title" type="text" v-model="title" class="form-control">
                </div>

                <div class="form-group">
                    <label for="img-links">Images</label>
                    <textarea id="img-links" cols="30" rows="10" v-model="imgLinksPlain" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="a-links">Links</label>
                    <textarea id="a-links" cols="30" rows="10" v-model="hrefPlain" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" cols="30" rows="10" v-model="descriptionPlain" class="form-control"></textarea>
                </div>
        </div>

        <div class="col-md-6">
            <div class="form">
                <label for="rawhtml">Raw HTML</label>
                <textarea id="rawhtml" class="form-control" cols="30" rows="10" :value="html"></textarea>
                <html-output :title="title" :links="links" :description="description" :hrefs="hrefs" v-show="false" @updated="templateUpdated"></html-output>
            </div>
        </div>
    </div>
</div>

<template id="html-output">
    <div>
        <h2>{{title}}</h2>
        <template v-for="link, i in links">
            <img class="thumb-image" :data-src="link">
            <div v-if="(i + 1) == links.length" class="gallery-content">
                <a :data-href="hrefs[i]"  target="_blank">
                <img :data-src="link">
                </a>
            </div>

            <img v-else :data-src="link">
        </template>
        <h3><font size="5">PRODUKTINFORMATION:</font></h3>
        <ul style="">
            <li style="" v-for="item in description">
                <font size="4" style="">{{item}}</font>
            </li>
        </ul>
    </div>
</template>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
Vue.component('html-output', {
    template: '#html-output',
    props: ['title', 'links', 'hrefs','description'],
    updated () {
        return this.$emit('updated', this.$el.innerHTML);
    }
});

new Vue({
    el: '#app',
    data: {
        title: '',
        imgLinksPlain: '',
        descriptionPlain: '',
        html: '',
        hrefPlain: ''
    },
    methods: {
        templateUpdated (data) {
            this.html = data.replace(/data-src/g, 'src').replace(/data-href/g, 'href');
        }
    },
    computed: {
        links() {
            return this.imgLinksPlain.trim().split("\n");
        },
        description () {
            return this.descriptionPlain.trim().split("\n");
        },
        hrefs(){ console.log(this.hrefPlain)
           return this.hrefPlain.trim().split("\n");
        }
    }
});
</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2018, 08:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Biglu
Надеюсь понятно объяснил
напишите что ввели и куда, что получили? что хотели получить?
для тех кто будет смотреть, проблема в строке 52.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2018, 10:53
Новичок на форуме
Отправить личное сообщение для Biglu Посмотреть профиль Найти все сообщения от Biglu
 
Регистрация: 19.11.2018
Сообщений: 3

В окно images ввожу 2 ссылки в столбик:
www.123.ru
www.456.ru
и в окно links ввожу 2 ссылки в столбик:
www.abv.ru
www.qwe.ru
Получаю следующее:
...<img src="www.123.ru" class="thumb-image"> <img src="www.123.ru"><img src="www.456.ru" class="thumb-image"> <div class="gallery-content"><a target="_blank" href="www.qwe.ru"><img src="www.456.ru"></a></div>...

А хочу получить такой вывод:
...<img src="www.123.ru" class="thumb-image"> <div class="gallery-content"><a target="_blank" href="www.abv.ru"><img src="www.123.ru"></a></div>
<img src="www.456.ru" class="thumb-image"> <div class="gallery-content"><a target="_blank" href="www.qwe.ru"><img src="www.456.ru"></a></div>

Как то так
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2018, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Biglu,
попробуйте так
<template v-for="link, i in links">
            <img class="thumb-image" :data-src="link">
            <div class="gallery-content">
                <a :data-href="hrefs[i]"  target="_blank">
                <img :data-src="link">
                </a>
            </div>

        </template>
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2018, 11:42
Новичок на форуме
Отправить личное сообщение для Biglu Посмотреть профиль Найти все сообщения от Biglu
 
Регистрация: 19.11.2018
Сообщений: 3

рони, Да! Работает вроде! Спасибо вам!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неожидаемый вывод в console.log объекта html Ымя Общие вопросы Javascript 3 26.01.2015 05:18
Kак преобразовать кракозябры(Мнемоники) обратно. html, node js vlzkonopatov AJAX и COMET 5 03.12.2014 14:12
Вывод из PHP в HTML gJam Серверные языки и технологии 7 05.07.2012 17:37
Вывод html тегов с переменной Eser Общие вопросы Javascript 3 04.07.2012 16:04
Типографика и HTML код Manjuriano (X)HTML/CSS 3 23.11.2011 12:22