Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2018, 17:15
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 17.07.2018
Сообщений: 30

Переход по ссылке при клике на id блока
Всем доброго дня.
Есть функция

window.onload = function () {

    var a = document.getElementById('idglub1');

    
    a.onclick = function() {
        document.location.href = 'Ссылка'
            }
}


Все работает до того времени, пока я не вставляю еще одну но с другой ссылкой, замена имен переменных не помогает.
Полный профан в JS...

Как сделать так чтобы все работала например при 20 разных id блоков.
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2018, 17:50
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

artemii,
Можно добавить пример html с разными блоками и пример скрипта с попыткой обработки кликов на разных блоках?
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2018, 17:54
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 17.07.2018
Сообщений: 30

Страничка на которой размещены блоки и скрипт https://vk.cc/8hHO5q
Блоки при клике на которые должны быть переходы - обрамлены рамкой, с анимацией.
Айдишники idglub1 , idglub2 и так далее
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2018, 18:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

artemii,
Просьба была насчет маленького примера html и маленького скрипта, на которых была бы видна проблема, а не целого сайта, на котором непросто найти нужное.
Что-то там не видно таких айдишников
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2018, 18:35
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 17.07.2018
Сообщений: 30

Увы это вп, не могу вычленить кусок хтмл, ничего не будет понятно по нему)
айдишники по поиску бьются, все ок
Скрипт выше - это целый, не кусок
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2018, 18:36
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 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>
Ответить с цитированием
  #7 (permalink)  
Старый 17.07.2018, 18:38
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 17.07.2018
Сообщений: 30

Вот пример 1го блока.
Как быть с 1м - понятно, скрипт работает корректно при 1й ссылке.
Но когда нужно чтобы было больше 2х ссылок - не пашет(
Ответить с цитированием
  #8 (permalink)  
Старый 17.07.2018, 18:43
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 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>
Ответить с цитированием
  #9 (permalink)  
Старый 17.07.2018, 19:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

artemii,
вы блок добавляете, а обработчик один?
Ответить с цитированием
  #10 (permalink)  
Старый 17.07.2018, 19:26
Аспирант
Отправить личное сообщение для artemii Посмотреть профиль Найти все сообщения от artemii
 
Регистрация: 17.07.2018
Сообщений: 30

Спасибо, но я не понял как сделать так, чтобы при клике на idglub1 был переход на ссылку1, а при клике на idglub2 был переход на ссылку2...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Сохранить положение скролла при переходе по ссылке Lucia14 Events/DOM/Window 1 31.12.2016 02:14
При клике на кнопку фон блока должен менять цвет Taylor jQuery 3 27.12.2015 13:50
Вывод по несколько div при клике. Lutidza Общие вопросы Javascript 1 16.05.2014 16:27
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11