Javascript.RU

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

Загрузка контента из файла по ID в зависимости от ID нажатой кнопки
Есть много кнопок с разными id. Например:

<a id="content1">Кнопка 1</a>
<a id="content2">Кнопка 2</a>


Есть блок, куда с помощью .load() должен быть подгружен контент при нажатии на какую-либо из кнопок. Например:

<div id="content-block"></div>


Есть файл content.html, содержащий блоки с контентом. Данные блоки имеют свой id и этот id по своему названию совпадает с id соответствующей кнопки. Например, кнопка имеет id="content1" и div c контентом в файле content.html имеет id="content1".

Как бы сделать так, чтобы при нажатии на кнопку (в данном случае на <a>), функция распознавала id этой кнопки и подставляла в load() рядом с файлом content.html. Например, если нажали на кнопку с id="content1", то происходило это:

$("#content-block").load("content.html #content1");


Если же нажали на кнопку с id="content2", то происходило это:

$("#content-block").load("content.html #content2");


Также, наряду с блоком для контента есть отдельный блок для заголовка:

<div id="title-block"></div>


Нужно чтобы так же в зависимости от id нажатой кнопки в этот блок подгружался текст из файла content.html. с таким же id только имеющий в конце "-title". Например, при нажатии на кнопку с id="content1" в <div id="title-block"></div> должен подгружаться текст с id="content1-title"

Вообщем, как сделать так, чтобы при нажатии на кнопку с id="content1" происходило это:

$("#content-block").load("content.html #content1");
$("#title-block").load("content.html #content1-title");


А если нажать на кнопку с id="content2" происходило это:

$("#content-block").load("content.html #content2");
$("#title-block").load("content.html #content2-title");


То есть, чтоб id кнопки на которую нажали подставлялось в load(), а также в конце этого id приклеивалось "-title" (в случае для заголовка).
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2018, 18:48
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от oldeuboi
чтобы при нажатии на кнопку с id="content1" происходило это:
<a id="content1">Кнопка 1</a>
<a id="content2">Кнопка 2</a>
<script>
document.querySelectorAll('a').forEach(function(item) { 
    item.addEventListener('click', function(){
         alert('content.html #' + this.id + '-title');
    })
});

</script>

Последний раз редактировалось Dilettante_Pro, 16.11.2018 в 10:13.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2018, 02:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Dilettante_Pro,
наверное
el=>el.addEventListener
вместо
document.addEventListener
а если вешаете на документ, forEach лишний

<a id="content1">Кнопка 1</a>
<a id="content2">Кнопка 2</a>
	<script>
document.querySelectorAll('a').forEach(el=>el.addEventListener('click', function(e){
  alert('content.html #' + e.currentTarget.id + '-title');
}));


P.S. e.currentTarget будет надежней
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2018, 07:33
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

j0hnik,
Ну да, конечно. Это я на бегу...
почистил.

Последний раз редактировалось Dilettante_Pro, 16.11.2018 в 10:11.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показ следующего числа в зависимости от нажатой кнопки TTATPuOT jQuery 1 09.10.2015 18:56
Загрузка контента в зависимости от браузера grifangel Общие вопросы Javascript 3 14.04.2015 21:02
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Отправка файла с фиксированым местоположением по нажатию кнопки greencard AJAX и COMET 16 17.07.2013 15:22
Загрузка контента в зависимости от переменных в URL Karandasheg AJAX и COMET 5 20.10.2011 04:41