Переход по ссылке при клике на id блока
Всем доброго дня.
Есть функция
window.onload = function () {
var a = document.getElementById('idglub1');
a.onclick = function() {
document.location.href = 'Ссылка'
}
}
Все работает до того времени, пока я не вставляю еще одну но с другой ссылкой, замена имен переменных не помогает. Полный профан в JS... Как сделать так чтобы все работала например при 20 разных id блоков. Спасибо |
artemii,
Можно добавить пример html с разными блоками и пример скрипта с попыткой обработки кликов на разных блоках? |
Страничка на которой размещены блоки и скрипт https://vk.cc/8hHO5q
Блоки при клике на которые должны быть переходы - обрамлены рамкой, с анимацией. Айдишники idglub1 , idglub2 и так далее |
artemii,
Просьба была насчет маленького примера html и маленького скрипта, на которых была бы видна проблема, а не целого сайта, на котором непросто найти нужное. Что-то там не видно таких айдишников |
Увы это вп, не могу вычленить кусок хтмл, ничего не будет понятно по нему)
айдишники по поиску бьются, все ок Скрипт выше - это целый, не кусок |
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> |
Вот пример 1го блока.
Как быть с 1м - понятно, скрипт работает корректно при 1й ссылке. Но когда нужно чтобы было больше 2х ссылок - не пашет( |
Небольшой макет
<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>
|
artemii,
вы блок добавляете, а обработчик один? |
Спасибо, но я не понял как сделать так, чтобы при клике на idglub1 был переход на ссылку1, а при клике на idglub2 был переход на ссылку2...
|
Цитата:
|
artemii,
<div class="href">блок1</div>
<div class="href">блок2</div>
<div class="href">блок3</div>
<script>
var arr = ['https://google.com','https://yandex.ru','http://vk.com'];
document.querySelectorAll('.href').forEach((el,i)=> el.onclick=e=> location = arr[i]);
</script>
|
Цитата:
В предпросмотре не работает даже ничего... |
Цитата:
|
artemii,
А что такое Сылка1, Ссылка2? Откуда их брать? |
Цитата:
Цитата:
|
Цитата:
|
Ссылки из массива
<style>
div {width:50px;
height:20px;
background:gray;
border:1px solid black;}
</style>
<div id = "idglub1">idglub1</div>
<div id = "idglub2">idglub2</div>
<div id = "idglub3">idglub3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var refer = ['Ссылка1','Ссылка2','Ссылка3'];
$("div[id*=idglub]").on('click', function(){
var idx = +this.id.replace(/\D+/g,"") - 1;
alert(refer[idx]);
// document.location.href = refer[idx];
});
</script>
|
Цитата:
первая к первому вторая ко второму.. |
Цитата:
Цитата:
А есть возможность сделать скрипт который именно по айдишникам бы работал? то есть при клике на айди1 был переход на ссылку 1, на айди2 на ссылку2 и так далее... |
Цитата:
|
<div id="href1">блок1</div>
<div id="href3">блок3</div>
<div id="href2">блок2</div>
<script>
var obj = {
href1:'https://google.com',
href2:'https://yandex.ru',
href3:'http://vk.com'
};
document.querySelectorAll('div[id^="href"]').forEach((el,i)=> el.onclick=e=> location = obj[el.id]);
</script>
|
Цитата:
|
artemii,
у меня работает =) |
Цитата:
В чем может быть ошибка? |
Вот как это сейчас работает, на первых 3х блоках работ
https://vk.cc/8hHO5q |
artemii,:cray:
Вы прямо так и вставили?
<script type="text/javascript">
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
ar refer = ['Ссылка1','Ссылка2','Ссылка3'];
$("div[id*=idglub]").on('click', function(){
var idx = +this.id.replace(/\D+/g,"") - 1;
alert(refer[idx]);
});</script>
еще и с ошибками - кусок от загрузки jQuery, ar refer Поздравляю! Я ведь у вас неоднократно спрашивал насчет ссылок. И вообще - зачем это нужно? Там и так все нормально работает по ссылкам, заложенным в блоки. |
Цитата:
Цитата:
Нужно для того чтобы кликабельным был ВЕСЬ блок (квадратик этот анимированный, а не только картинка и заголовок) Подскажите пожалуйста в чем ошибка |
Цитата:
Есть еще куски? |
Цитата:
|
Цитата:
|
<style>
div.cont {
width:60px;
background:gray;
border:1px solid black;}
</style>
<div class="cont" id = "idglub1">
<div>idglub1</div>
<div>
<a href="#">Ссылка1</a>
</div>
</div>
<div class="cont" id = "idglub2">
<div>idglub2</div>
<div>
<a href="#">Ссылка2</a>
</div>
</div>
<div class="cont" id = "idglub3">
<div>idglub3</div>
<div>
<a href="#">Ссылка3</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("div[id*=idglub]").on('click', function(){
$(this).find('a').trigger('click');
});
$("a").on('click', function(e){
e.preventDefault();
e.stopPropagation();
alert(this.textContent);
});
</script>
Вам из этого примера нужны только строки 28-30 И уберите все лишнее, что вы еще, мне кажется, где-то вписали. |
Цитата:
|
Цитата:
|
artemii,
Можно посмотреть результат? По прежней ссылке осталось все по-старому. |
artemii,
Цитата:
Также удалить
var refer = ['https://zaogss.ru/bolshaya-pochtovaya/','https://zaogss.ru/nagatinskaya/','https://zaogss.ru/stahanovskaya/'];
$("div[id*=idglub]").on('click', function(){
var idx = +this.id.replace(/D+/g,"") - 1;
document.location.href = refer[idx];
});
(крутил этот скрипт на вашем сайте в консоли - почему-то не срабатывает this.id.replace(/D+/g,""), не выделяет цифры, возвращает целиком id) |
Цитата:
Цитата:
Вот тут теперь Может быть проблема в самом ВП? |
Может быть есть другой способ сделать кликабельным весь блок?
При условии что это ВП и нет доступа к голому хтмл |
artemii,
Насчет предыдущей версии - вы неправильно ввели this.id.replace(/D+/g,"") Нужно this.id.replace(/\D+/g,"") И чтобы не было лишнего мусора Новый вариант сейчас посмотрю |
ВП почему то убирает слэш вот тут (/D+/g,""), хотя все вставляю правильно
|
| Часовой пояс GMT +3, время: 21:17. |