1

Доброго времени. Столкнулся с такой задачей :

Есть 25 кнопок, при нажатии на кнопку появляется модульное окно с заголовком и текстом. Логичнее всего конечно сделать выгрузку этого текста и заголовка, чем копипатсить 25 модульных окон и писать для каждого обработчик.

Вспомнил про json, но возник вопрос. Как сделать так что бы при нажатии на кнопки выводился для каждой кнопки в модульное окно свой текст?

2 ответа 2

3

Если я правильно Вас понял, то вот так:

// Устанавливаем нужные переменные и парсим JSON
let mWrapper = document.querySelector('#modalWrapper'),
    mClose = mWrapper.querySelector('#modalClose'),
    mTitle = mWrapper.querySelector('#modalTitle'),
    mContent = mWrapper.querySelector('#modalContent'),
// В data есть объекты на каждый ID
// Если есть ID которого нет в списке data - используем свойство notFound
    storage = JSON.parse(`
{
  "data": {
    "id1": {
      "title": "To be, or not to be: that is the question:",
      "content": "Быть или не быть, вот в чём вопрос. Достойно ль"
    },
    "id2": {
      "title": "Whether ’tis nobler in the mind to suffer",
      "content": "Смиряться под ударами судьбы,"
    },
    "id3": {
      "title": "The slings and arrows of outrageous fortune,",
      "content": "Иль надо оказать сопротивленье"
    },
    "id4": {
      "title": "Or to take arms against a sea of troubles,",
      "content": "И в смертной схватке с целым морем бед"
    },
    "id5": {
      "title": "And by opposing end them? To die: to sleep;",
      "content": "Покончить с ними? Умереть. Забыться."
    },
    "id6": {
      "title": "No more; and, by a sleep to say we end",
      "content": "И знать, что этим обрываешь цепь"
    },
    "id7": {
      "title": "The heart-ache and the thousand natural shocks",
      "content": "Сердечных мук и тысячи лишений,"
    },
    "id8": {
      "title": "That flesh is heir to, ’tis a consummation",
      "content": "Присущих телу. Это ли не цель"
    },
    "id9": {
      "title": "Devoutly to be wish’d. To die, to sleep;",
      "content": "Желанная? Скончаться. Сном забыться."
    },
    "id10": {
      "title": "To sleep: perchance to dream: ay, there’s the rub;",
      "content": "Уснуть... и видеть сны? Вот и ответ."
    },
    "id11": {
      "title": "For in that sleep of death what dreams may come",
      "content": "Какие сны в том смертном сне приснятся,"
    },
    "id12": {
      "title": "When we have shuffled off this mortal coil,",
      "content": "Когда покров земного чувства снят?"
    },	
    "id13": {
      "title": "Must give us pause. There’s the respect",
      "content": "Вот в чём разгадка. Вот что удлиняет"
    }
  },
  "notFound": {
    "title": "Not found",
    "content": "404"
  }
}
`);
// Определяется нужный заголовок/контент из JSON и отдаётся на рендер в createWindow
function openWindow(el){
  let id = el.dataset.winId,
      data = storage.data["id" + id];
  
  if(!data)
    data = storage.notFound;
  
  createWindow(data, id);
}

// Устанавливаем данные в виде (в DOM) и отображаем окно
function createWindow(data, id){
  mTitle.innerHTML = id + ' | '  + data.title;
  mContent.innerHTML = data.content;
  mWrapper.style.display = 'flex';
}

// Делегируем слушатель рапперу
document.querySelector('#wrapper').addEventListener('click', function(e){
  let target = e.target;
  
  // Если клик по рапперу, но не по кнопке с идентификатором - выходим
  if(!target.closest('input') || target.dataset.winId === undefined)
    return;
 
  // Запускаем отрисовку окна
  openWindow(target);
});

// Просто слушатели на закрытие окна - по фону и по крестику в углу
mWrapper.addEventListener('click', e => e.target === mWrapper ? mWrapper.style.display = 'none' : null);
mClose.addEventListener('click', e => mWrapper.style.display = 'none');
#modalWrapper{
  position: fixed;
  display: none;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.3);
  z-index: 98;
}
#modalWindow{
  margin: auto;
  min-width: 300px;
  min-height: 200px;
  background: white;
  border-radius: 2px;
  position: relative;
  padding: 5px;
  z-index: 99;
}
#modalClose{
  position: absolute;
  top: 0; right: 5px;
  cursor: pointer;
}
#modalTitle{
  padding: 5px;
  font-weight: 800;
  border-bottom: 1px solid blue;
}
#modalContent{
  padding-top: 5px;
}
<div id='wrapper'>
  <input type="button" data-win-id="1" value="Открыть окно"><br />
  <input type="button" data-win-id="2" value="Открыть окно"><br />
  <input type="button" data-win-id="3" value="Открыть окно"><br />
  <input type="button" data-win-id="4" value="Открыть окно"><br />
  <input type="button" data-win-id="5" value="Открыть окно"><br />
  <input type="button" data-win-id="6" value="Открыть окно"><br />
  <input type="button" data-win-id="7" value="Открыть окно"><br />
  <input type="button" data-win-id="8" value="Открыть окно"><br />
  <input type="button" data-win-id="9" value="Открыть окно"><br />
  <input type="button" data-win-id="10" value="Открыть окно"><br />
  <input type="button" data-win-id="11" value="Открыть окно"><br />
  <input type="button" data-win-id="12" value="Открыть окно"><br />
  <input type="button" data-win-id="13" value="Открыть окно"><br />
  <input type="button" data-win-id="14" value="Для этого окна нет стандартной записи"><br />
</div>
<div id='modalWrapper'>
  <div id='modalWindow'>
    <div id='modalClose'>x</div>
    <div id='modalTitle'>Title</div>
    <div id='modalContent'>Content</div>
  </div>
</div>

4
  • А если необходимо брать данные из внешнего json? как это задать?
    – Drop
    28 авг 2016 в 11:48
  • @Drop, ну... подтягивайте через AJAX и кладите в переменную.
    – user207618
    28 авг 2016 в 16:07
  • Если память не изменяет то вроде как хранение больших массивов данных в переменных это плохо. Мол оперативку больше занимает.
    – Drop
    28 авг 2016 в 19:21
  • 1
    @Drop, 25 элементов - это не то, чтобы большой массив. Вот 10000000 элементов - это да. Но грамотные люди никогда не работают с такими объёмами, только по кусочкам, если нужно.
    – user207618
    29 авг 2016 в 7:56
0

$(document).ready(function() {
  $(".click").click(function() {
    var alert_text = $(this).attr("data-val");
    alert(alert_text);
  });
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
</head>

<body>
  <a class="click" href="#" data-val="Любой текст №1">Button#1</a>
  <br>
  <a class="click" href="#" data-val="Любой текст №2">Button#2</a>
  <br>
  <a class="click" href="#" data-val="Любой текст №3">Button#3</a>
</body>

</html>

1
  • Чтобы было 25 кнопок нужно просто их скопировать )) 28 авг 2016 в 2:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.