17.07.2018, 17:15
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
Переход по ссылке при клике на id блока
Всем доброго дня.
Есть функция
window.onload = function () {
var a = document.getElementById('idglub1');
a.onclick = function() {
document.location.href = 'Ссылка'
}
}
Все работает до того времени, пока я не вставляю еще одну но с другой ссылкой, замена имен переменных не помогает.
Полный профан в JS...
Как сделать так чтобы все работала например при 20 разных id блоков.
Спасибо
|
|
17.07.2018, 17:50
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
artemii,
Можно добавить пример html с разными блоками и пример скрипта с попыткой обработки кликов на разных блоках?
|
|
17.07.2018, 17:54
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
Страничка на которой размещены блоки и скрипт https://vk.cc/8hHO5q
Блоки при клике на которые должны быть переходы - обрамлены рамкой, с анимацией.
Айдишники idglub1 , idglub2 и так далее
|
|
17.07.2018, 18:07
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
artemii,
Просьба была насчет маленького примера html и маленького скрипта, на которых была бы видна проблема, а не целого сайта, на котором непросто найти нужное.
Что-то там не видно таких айдишников
|
|
17.07.2018, 18:35
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
Увы это вп, не могу вычленить кусок хтмл, ничего не будет понятно по нему)
айдишники по поиску бьются, все ок
Скрипт выше - это целый, не кусок
|
|
17.07.2018, 18:36
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
https://zaogss.ru/glub/:213:</header><!-- header --> <div class="realfactory-page-wrapper" id="realfactory-page-wrapper" ><div class="gdlr-core-page-builder-body"><div class="gdlr-core-pbf-wrapper " ><div class="gdlr-core-pbf-wrapper-content gdlr-core-js " ><div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container" ><div class="gdlr-core-pbf-element" ><div class="gdlr-core-title-item gdlr-core-item-pdb clearfix gdlr-core-left-align gdlr-core-title-item-caption-top gdlr-core-item-pdlr" ><span class="gdlr-core-title-item-caption gdlr-core-info-font gdlr-core-skin-caption" >Выполненные работы</span><div class="gdlr-core-title-item-title-wrap " ><h3 class="gdlr-core-title-item-title gdlr-core-skin-title" >Глубинное водопонижение</h3></div></div></div><div class="gdlr-core-pbf-element" ><div class="gdlr-core-divider-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-divider-item-normal" ><div class="gdlr-core-divider-line gdlr-core-skin-divider" style="border-color: #00517c;" ></div></div></div><div class="gdlr-core-pbf-column gdlr-core-column-20 gdlr-core-column-first" id="idglub1" ><div class="gdlr-core-pbf-column-content-margin gdlr-core-js skill_block" ><div class="gdlr-core-pbf-background-frame" style="margin: 3px 15px 15px 15px;border-width: 3px 3px 3px 3px;border-style: solid;border-color: #d6d6d6;" ></div><div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " ><div class="gdlr-core-pbf-element" ><div class="gdlr-core-image-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-center-align" ><div class="gdlr-core-image-item-wrap gdlr-core-media-image gdlr-core-image-item-style-rectangle" style="border-width: 0px;" ><a href="/bolshaya-pochtovaya/" target="_self" ><img src="https://zaogss.ru/wp-content/uploads/2018/04/igly.bol_.pocht_.6-800x420.jpg" alt="" width="800" height="420" /><span class="gdlr-core-image-overlay " style="background: rgba(0, 81, 124, 0.6);" ><i class="gdlr-core-image-overlay-icon fa fa-link gdlr-core-size-22" ></i></span></a></div></div></div><div class="gdlr-core-pbf-element" ><div class="gdlr-core-title-item gdlr-core-item-pdb clearfix gdlr-core-center-align gdlr-core-title-item-caption-top gdlr-core-item-pdlr" style="padding-bottom: 20px;" ><div class="gdlr-core-title-item-title-wrap " ><h3 class="gdlr-core-title-item-title gdlr-core-skin-title" style="font-size: 20px;font-weight: 500;letter-spacing: 0px;text-transform: none;" ><a href="/bolshaya-pochtovaya/" target="_self" >Большая Почтовая</a></h3></div></div></div><div class="gdlr-core-pbf-element" ><div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-center-align" ><div class="gdlr-core-text-box-item-content" style="font-size: 16px;" ><p>Объект: «Многофункциональный жилой комплекс» 1-я очередь, расположенном по адресу: г. Москва, ул. Большая Почтовая, вл.24,30, 34.»</p>
|
|
17.07.2018, 18:38
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
Вот пример 1го блока.
Как быть с 1м - понятно, скрипт работает корректно при 1й ссылке.
Но когда нужно чтобы было больше 2х ссылок - не пашет(
|
|
17.07.2018, 18:43
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Небольшой макет
<style>
div {width:20px;
height:20px;
background:gray;
border:1px solid black;}
</style>
<div id = "idglub1"></div>
<div id = "idglub2"></div>
<div id = "idglub3"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("div[id*=idglub]").on('click', function(){
alert(this.id);
});
</script>
|
|
17.07.2018, 19:19
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
artemii,
вы блок добавляете, а обработчик один?
|
|
17.07.2018, 19:26
|
Аспирант
|
|
Регистрация: 17.07.2018
Сообщений: 30
|
|
Спасибо, но я не понял как сделать так, чтобы при клике на idglub1 был переход на ссылку1, а при клике на idglub2 был переход на ссылку2...
|
|
|
|