0

На странице есть элемент:

                    <div class="trading__data-item increase">
                        <div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
                        <div class="trading__data-title">Currency</div>
                        <div class="trading__data-balance">Value</div>                           
                        <div class="trading__data-state">0</div>
                    </div>

Css:

.trading__data-item {
    position: relative;
    border:1px solid #272E3D;
    border-radius: 5px;
    padding: 10px 25px 16px 16px;
    margin-left: 13px;
    width: 225px;
    height: 96px;
}
.trading__data-item__prefs {
    position: absolute;
    right: 0;
    top: 5px;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.trading__data-item__prefs span {
    height: 4px;
    width: 4px;
    background-color: #45506A;
    border-radius: 50%;
    margin-bottom: 2px;
    display: block;
}
.trading__data-item__prefs:hover span {background-color: #aaa;}
.trading__data-item__prefs span:last-child {
    margin-bottom: 0;}

https://jsfiddle.net/L8cp39u6/ Как сделать выпадающий список при клике на 3 точки, в правом верхнем углу блока? Т.е я кликаю на 3 точки, у меня появляется список, и при выборе определенного элемента из списка - я записываю нужное мне значение в блок <div class="trading__data-balance"> Что-то типо этого: введите сюда описание изображения

3
  • а где выпадающий список и куда он должен выпадать?
    – user355286
    15 дек 2019 в 7:41
  • @hu-fo-of-ex его нет, можно ли его как-то присобачить туда?
    – Ayurpwnz
    15 дек 2019 в 7:42
  • @hu-fo-of-ex добавил пример, значения, которые буду присваивать при определенном выбранном элементе в списке я буду загружать через php, мне просто нужно условие, что если выбран 1ый эл списка, то у блока <div class="trading__data-balance"> такое-то значение
    – Ayurpwnz
    15 дек 2019 в 7:54

1 ответ 1

1

Так?

const data = [{
    id: 1,
    title: 'item-1',
    balance: 33,
    state: 44,
  },
  {
    id: 2,
    title: 'item-2',
    balance: 100,
    state: 4,
  },
  {
    id: 3,
    title: 'item-3',
    balance: 555,
    state: 666,
  }

]

const items = document.querySelectorAll('.trading__data-item');

items.forEach(item => {
  item.addEventListener('click', e => {
    if (
      e.target.classList.contains('trading__data-item__prefs') ||
      e.target.parentNode.classList.contains('trading__data-item__prefs')) {
      item.querySelector('ul').classList.toggle('hidden');
    }

    if (e.target.tagName == 'BUTTON') {
      item.querySelector('ul').classList.toggle('hidden');
      data.forEach(el => {
        if (e.target.dataset.title == el.title) {
          item.querySelector('.trading__data-title').innerText = el.title;
          item.querySelector('.trading__data-balance').innerText = el.balance;
          item.querySelector('.trading__data-state').innerText = el.state;
        }
      })
    }
  })
})
.trading__data {
  display: flex;
  padding-right: 3px;
  flex-wrap: wrap;
}

.trading__data-item {
  position: relative;
  border: 1px solid #272E3D;
  border-radius: 5px;
  padding: 10px 25px 16px 16px;
  margin-left: 13px;
  width: 225px;
  height: 96px;
}

.trading__data-item__prefs {
  position: absolute;
  right: 0;
  top: 5px;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.trading__data-item__prefs span {
  height: 4px;
  width: 4px;
  background-color: #45506A;
  border-radius: 50%;
  margin-bottom: 2px;
  display: block;
}

.trading__data-item__prefs:hover span {
  background-color: #aaa;
}

.trading__data-item__prefs span:last-child {
  margin-bottom: 0;
}

.trading__data-title {
  font-size: 28px;
  font-weight: bold;
}

ul {
  position: absolute;
  right: 0;
  top: 10px;
  list-style: none;
}

li {
  border-bottom: 1px solid black;
  width: 30px;
  text-align: center;
}

li:first-child {
  border-top: 1px solid black;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

.hidden {
  display: none;
}
<div class="trading__data tab__block">
  <div class="trading__data-item increase" id="block_0">
    <div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
    <div class="trading__data-title">Currency 0</div>
    <div class="trading__data-balance" id="bal_0">Value 0</div>

    <div class="trading__data-state">0</div>

    <ul class="hidden">
      <li><button data-title="item-1">1</button></li>
      <li><button data-title="item-2">2</button></li>
      <li><button data-title="item-3">3</button></li>
    </ul>
  </div>
  <div class="trading__data-item increase" id="block_1">
    <div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
    <div class="trading__data-title">Currency 1</div>
    <div class="trading__data-balance" id="bal_1">Value 1</div>

    <div class="trading__data-state">0</div>

    <ul class="hidden">
      <li><button data-title="item-1">1</button></li>
      <li><button data-title="item-2">2</button></li>
      <li><button data-title="item-3">3</button></li>
    </ul>
  </div>
  <div class="trading__data-item increase" id="block_2">
    <div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
    <div class="trading__data-title">Currency 2</div>
    <div class="trading__data-balance" id="bal_2">Value 2</div>

    <div class="trading__data-state">0</div>

    <ul class="hidden">
      <li><button data-title="item-1">1</button></li>
      <li><button data-title="item-2">2</button></li>
      <li><button data-title="item-3">3</button></li>
    </ul>
  </div>
  <div class="trading__data-item increase" id="block_3">
    <div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
    <div class="trading__data-title">Currency 3</div>
    <div class="trading__data-balance" id="bal_3">Value 3</div>

    <div class="trading__data-state">0</div>

    <ul class="hidden">
      <li><button data-title="item-1">1</button></li>
      <li><button data-title="item-2">2</button></li>
      <li><button data-title="item-3">3</button></li>
    </ul>
  </div>
</div>

7
  • Да, то что нужно, спасибо огромное! А вы не могли бы еще адаптировать это под несколько блоков <div class="trading__data-item increase"> при условии, что у каждого будет уникальный id?
    – Ayurpwnz
    15 дек 2019 в 9:03
  • Выложи полную верстку этих всех блоков со всеми id и классами
    – user355286
    15 дек 2019 в 9:30
  • jsfiddle.net/h2zk6ygm, вот
    – Ayurpwnz
    15 дек 2019 в 9:45
  • 1
    @Ayurpwnz поменял ответ
    – user355286
    15 дек 2019 в 9:55
  • Да, очень выручили, спасибо большое
    – Ayurpwnz
    15 дек 2019 в 9:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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