1

Имеются блоки, при нажатии на которых внизу должен появиться блок, определенный в data-item. К примеру, если он кликнул по блоку с data-item-open="1", внизу должен появиться блок с data-item="1".

var items = $(".item");
var show = items.data("item-open");
items.data("item-open");
document.write(show + " - Modal");
body{
  font-family: sans-serif;
  
}
.row, .content{
  display: flex;
  flex-direction: row;
}
.item, .show_div{
  width: 75px;
  height: 50px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;
}
.item span, .show_div span{
  text-transform: uppercase;
  font-size: 10px;
  color:#fff;
}
.content{
  height:100px;
}
.content h3{
  width:50%;
  font-size: 16px;
}
.show_div{
  display: none;
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item" data-item-open = "1">
    <span>Insides</span>
  </div>
  <div class="item" data-item-open = "2">
    <span>crying</span>
  </div>
  <div class="item" data-item-open = "3">
    <span>save</span>
  </div>
  <div class="item" data-item-open = "4">
    <span>me </span>
  </div>
  <div class="item" data-item-open = "5">
    <span>now </span>
  </div>
</div>
<div class="content">
  <h3>Здесь должны быть показаны определенные блоки data-item, при нажатии на верхние блоки</h3>
  <div class="show_div" data-item = "1">
    <span>You </span>
  </div>
  <div class="show_div" data-item = "1">
    <span>were </span>
  </div>
  <div class="show_div" data-item = "1">
    <span>there </span>
  </div>
  <div class="show_div" data-item = "1">
    <span>impossibly </span>
  </div>
  <div class="show_div" data-item = "1">
    <span>alone </span>

  </div>
</div>

1 ответ 1

3

$(".item").click(function() {
  $('.show_div').hide(200);
  $('.show_div[data-item=' + $(this).data("item-open") + ']').show(500)
})
body {
  font-family: sans-serif;
}

.row,
.content {
  display: flex;
  flex-direction: row;
}

.item,
.show_div {
  width: 75px;
  height: 50px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;
}

.item span,
.show_div span {
  text-transform: uppercase;
  font-size: 10px;
  color: #fff;
}

.content {
  height: 100px;
}

.content h3 {
  width: 50%;
  font-size: 16px;
}

.show_div {
  display: none;
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item" data-item-open="1">
    <span>Insides</span>
  </div>
  <div class="item" data-item-open="2">
    <span>crying</span>
  </div>
  <div class="item" data-item-open="3">
    <span>save</span>
  </div>
  <div class="item" data-item-open="4">
    <span>me </span>
  </div>
  <div class="item" data-item-open="5">
    <span>now </span>
  </div>
</div>
<div class="content">

  <div class="show_div" data-item="1">
    <span>You </span>
  </div>
  <div class="show_div" data-item="2">
    <span>were </span>
  </div>
  <div class="show_div" data-item="3">
    <span>there </span>
  </div>
  <div class="show_div" data-item="4">
    <span>impossibly </span>
  </div>
  <div class="show_div" data-item="5">
    <span>alone </span>

  </div>
</div>

1
  • Заработало, спасибо!)
    – Bekzod
    14 мар 2018 в 12:25

Ваш ответ

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

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