3

Здесь для каждого элемента создается отдельное событие. Хотелось бы сделать более правильно.

При клике на объект класс "fruits", должно браться значение из объекта.

Как можно привязать к классу(fruits) объект и выполнить одно событие для всех элементов класса?

let arr = [
        {title: 'Apple', val: "25 cal."},
        {title: 'Orange', val: "35 cal."},
        {title: 'Apricot', val: "45 cal."},
        {title: 'Mandarin', val: "55 cal."},
        {title: 'Stawberry', val: "65 cal."},
        {title: 'Rastberry', val: "75 cal."},
    ];
function fruitClick() {
  let result = document.querySelector('.result');
  /
  for (let i in fruitItem) {

    let out = '';
    fruitItem[i].onclick = function() {
      for (let x in arr) {
        if (fruitItem[i].getAttribute('data-name') == arr[x].title) {
          out += `<p>${arr[x].val}</p>`;
        }
      }
      result.innerHTML = out;
    }
  }
}
<div class="fruitsCalc">
  <div class="container">
    <div class="fruits" id="Apple" data-name="Apple" onclick="fruitClick()">Apple</div>
    <div class="fruits" id="Orange" data-name="Orange" onclick="fruitClick()">Orange</div>
    <div class="fruits" id="Apricot" data-name="Apricot" onclick="fruitClick()">Apricot</div>
  </div>
  <div class="container">
    <div class="fruits" id="Mandarin" data-name="Mandarin" onclick="fruitClick()">Mandarin</div>
    <div class="fruits" id="Stawberry" data-name="Stawberry" onclick="fruitClick()">Stawberry</div>
    <div class="fruits" id="Rastberry" data-name="Rastberry" onclick="fruitClick()">Rastberry</div>
  </div>
  <div class="result">
    <h2 style="text-align: center">RESULT:</h2>
  </div>
</div>

2
  • Не совсем понятно, зачем нужна проверка? if (fruitItem[i].getAttribute('data-name') == arr[x].title) { Я об этой строке
    – Air
    20 авг 2019 в 17:20
  • таким образом, программа проверяет по какому элементу был произведен клик и выводит соответствующие данные.
    – Aleksf
    20 авг 2019 в 19:09

1 ответ 1

3

Всё равно ведь всё крутится вокруг названий фруктов. Тогда именно их и можно сразу использовать в виде ключей объекта. Покликайте, правильно работает?)

let obj = {
  apple: 25,
  orange: 35,
  apricot: 45,
  mandarin: 55,
  stawberry: 65,
  rastberry: 75,
}

let result = document.getElementById('result');
let fruits = document.querySelectorAll('.fruits');
let sum = 0; // Сумма выбранных

for( let i = 0; i < fruits.length; i++ ){
  let checked = false; // Все кнопки изначально не кликнуты

  fruits[i].addEventListener('click', function(){
    this.classList.toggle('active');
    checked = !checked; // false ←→ true - постоянное переключение при клике
    let val = obj[ this.dataset.name ]; // Сразу достается нужное число
    sum = checked ? sum + val : sum - val;
    result.textContent = sum + ' cal.';
  });
}
/* Ненужная декорация. Кому-то нечего было делать */
.fruits {
  position: relative;
  overflow: hidden;
  box-shadow: 1px 1px 3px #333a;
  width: 100px;
  margin: 7px;
  padding: 2px 4px;
  cursor: pointer;
  user-select: none;
}
.fruits::after {
  position: absolute;
  content: "•";
  color: #f00;
  right: -10px;
  transition: 0.2s;
}
.fruits:hover {
  box-shadow: 1px 1px 5px #444;
}
.fruits:active {    
  box-shadow: 1px 1px 3px #222;
}
.fruits.active {
  background-color: #eee;
}
.fruits.active::after {
  right: 7px;
}
.test { position: fixed; top: 5px; right: 100px; }
<div class="fruitsCalc">
  <div class="container">
    <div class="fruits" data-name="apple">Apple</div>
    <div class="fruits" data-name="orange">Orange</div>
    <div class="fruits" data-name="apricot">Apricot</div>
  </div>
  <div class="container">
    <div class="fruits" data-name="mandarin">Mandarin</div>
    <div class="fruits" data-name="stawberry">Stawberry</div>
    <div class="fruits" data-name="rastberry">Rastberry</div>
  </div>
  <div class="result">
    <h2 class="test">RESULT: <span id="result"></span></h2>
  </div>
</div>

1
  • Все работает) Именно то, что мне было нужно. Спасибо за помощь!
    – Aleksf
    23 авг 2019 в 10:37

Ваш ответ

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

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