02.11.2017, 13:02
|
|
Аспирант
|
|
Регистрация: 16.09.2014
Сообщений: 52
|
|
|
Переменные в html
Есть код. Таких блоков в странице будет много, у них разные id, типа PANEL-2, PANEL-3...
В каждом таком блоке есть заголовок ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ (он первый в тексте примера), и ссылки в которых используется значение этого заголовка (они ниже и их будет много).
Вопрос. Как сделать так чтобы значение заголовка автоматически вставлялось в ссылки с помощью какой нибудь js-переменной?
Можете помочь с написанием скрипта? Спасибо.
<div class="panel panel-default" id="PANEL-2">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ</a>
</div>
<div id="panel-element-2" class="panel-collapse collapse">
<div class="panel-body">
<a href="http://google.com/ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ">ссылка 1</a>
<a href="http://google.com/ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ">ссылка 2</a>
...
</div>
</div>
</div>
Последний раз редактировалось Exhaust_, 02.11.2017 в 13:08.
|
|
02.11.2017, 13:16
|
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
|
Сообщение от Exhaust_
|
|
ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ
|
конкретнее
|
Сообщение от Exhaust_
|
|
автоматически вставлялось в ссылки
|
куда именно? В текст ссылки или атрибут href? |
|
02.11.2017, 13:19
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Ты хочешь текст отсюда
|
Сообщение от Exhaust_
|
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ</a>
|
Куда-то поместить еще?
У тебя серверноего языка нет совсем?
Не понятно зачем ты преобразовываешь страницу клиентским скриптом...  |
|
02.11.2017, 14:35
|
|
Аспирант
|
|
Регистрация: 16.09.2014
Сообщений: 52
|
|
Понял, не раскрыл тему. Смотрите
1. Есть такая ссылка, у нее есть анкор. Значение этого анкора скрипт должен вставить в "другие ссылки".
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">КЛЮЧЕВОЕ+СЛОВО</a>
2. Это "другие ссылки". На том месте где в них написано "КЛЮЧЕВОЕ+СЛОВО" должен быть код который вставляет наш анкор.
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
...
3. Еще есть блоки с id-шниками типа PANEL-2, PANEL-3.... В блок завернуто все выше перечисленное. И фишка в том что таких блоков будет много и они не должны мешать друг другу работать со скриптом.
<div class="panel panel-default" id="PANEL-2">
...
</div>
Кажись все. |
|
02.11.2017, 14:46
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от Exhaust_
|
|
Еще есть блоки с id-шниками типа PANEL-2, PANEL-3....
|
Если они обрабатываются одинаково, то у них должен быть какой-то одинаковый класс.
Искать элементы с ИД начинается на PANEL-, считаю моветон...
И опять не понятно почему сервер сразу не делает страницу какой нужно. Почему ее вообще переделывать на клиенте? |
|
02.11.2017, 15:02
|
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
Exhaust_,
Понятия немного сбивают с толку. Анкор в html - это #panel-element-2, а подразумевался текст ссылки, как понял я.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="panel panel-default" id="PANEL-2">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">раз+два</a>
</div>
<div id="panel-element-2" class="panel-collapse collapse">
<div class="panel-body">
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
</div>
</div>
</div>
<script>
(function(parent, title, links, re, window, document) {
parent = document.querySelectorAll(parent);
[].forEach.call(parent, function(elem, indx) {
title = elem.querySelector(title);
links = elem.querySelectorAll(links);
[].forEach.call(links, function(link, indx) {
var href = decodeURI(link.href);
link.href = href.replace(new RegExp(re), title.textContent.trim());
});
});
})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
</script>
</body>
</html>
|
|
02.11.2017, 15:19
|
|
Аспирант
|
|
Регистрация: 16.09.2014
Сообщений: 52
|
|
Rasy, почти то что нужно. Работает замечательно если <div id="PANEL-1"> сам по себе. Но когда их несколько, то работает только первый (посмотрите пожалуйста пример в коде страницы), а их будет очень много в одной странице.
PS: я думал, что код ссылок будет выглядеть как то так:
https://www.google.com.ua/search?q=<script>function(...);</script>&adsdiag=3542360
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="panel panel-default" id="PANEL-1">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1" href="#panel-element-1">1+2</a>
</div>
<div id="panel-element-1" class="panel-collapse collapse">
<div class="panel-body">
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
</div>
</div>
</div>
<div class="panel panel-default" id="PANEL-2">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">3+4</a>
</div>
<div id="panel-element-2" class="panel-collapse collapse">
<div class="panel-body">
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
</div>
</div>
</div>
<script>
(function(parent, title, links, re, window, document) {
parent = document.querySelectorAll(parent);
[].forEach.call(parent, function(elem, indx) {
title = elem.querySelector(title);
links = elem.querySelectorAll(links);
[].forEach.call(links, function(link, indx) {
var href = decodeURI(link.href);
link.href = href.replace(new RegExp(re), title.textContent.trim());
});
});
})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
</script>
</body>
</html>
|
|
02.11.2017, 15:35
|
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
Exhaust_,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="panel panel-default" id="PANEL-1">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1" href="#panel-element-1">1+2</a>
</div>
<div id="panel-element-1" class="panel-collapse collapse">
<div class="panel-body">
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
</div>
</div>
</div>
<div class="panel panel-default" id="PANEL-2">
<div class="panel-heading">
<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">3+4</a>
</div>
<div id="panel-element-2" class="panel-collapse collapse">
<div class="panel-body">
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
</div>
</div>
</div>
<script>
(function(parent, title, links, re, window, document) {
parent = document.querySelectorAll(parent);
[].forEach.call(parent, function(elem, indx) {
var t = elem.querySelector(title);
var l = elem.querySelectorAll(links);
[].forEach.call(l, function(link, indx) {
var href = decodeURI(link.href);
link.href = href.replace(new RegExp(re), t.textContent.trim());
});
});
})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
</script>
</body>
</html>
|
|
02.11.2017, 16:04
|
|
Аспирант
|
|
Регистрация: 16.09.2014
Сообщений: 52
|
|
Спасибо, то что нужно 
+ в карму |
|
02.11.2017, 16:12
|
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
Exhaust_,
|
|
|
|
