подсчитать элементы для каждой опции в выборе - PullRequest
Новая
       70

подсчитать элементы для каждой опции в выборе

0 голосов
/ 27 мая 2020

Как я могу подсчитать количество div с классом 'gallery-item', которое у меня есть для каждой опции, и добавить число к html для выбора соответствующей опции? что-то вроде Лондона (2). Париж (1). Токио (3)

Вот простой пример

https://jsfiddle.net/2df58zqc/1/

let valueNew = () => {
      const SELECT_CONTENT = document.querySelectorAll('.select-content');
      const GALLERY_SELECT = document.querySelector('.gallery-select');
      SELECT_CONTENT.forEach((selectContent) => {
        selectContent.classList.remove('visible');
      });
      SELECT_CONTENT[GALLERY_SELECT.selectedIndex].classList.add('visible');
    };
    Array.from(document.getElementsByClassName('gallery-select'), (select) =>
      select.addEventListener('change', valueNew, false),
    );

<div class="select-wrapper">
  <select class="gallery-select">
    <option>Lodon</option>
    <option>Paris</option>
    <option>Tokyo</option>
  </select>
</div>

<div class="select-content-list">
  <div class="select-content">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div class="select-content">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div class="select-content">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

спасибо !!

1 Ответ

0 голосов
/ 27 мая 2020

Есть один способ добиться этого.

Создав объект, который имеет текст параметра, такой как название города в этом примере, и отображающую необходимую информацию об изображении, используйте его для создания как <option />, так и <img /> элементы динамически. Количество изображений для каждой опции затем может быть доступно для каждого текста опции.

например, этот объект может выглядеть следующим образом: imageInfoByCity

const imageInfoByCity = {
  Tokoy: [
    {
      src: 'https://via.placeholder.com/150',
    }, {
      src: 'https://via.placeholder.com/150',
    }, {
      src: 'https://via.placeholder.com/150',
    }],
  Paris: [{
    src: 'https://via.placeholder.com/150',
  }],
  London: [{
    src: 'https://via.placeholder.com/150',
  }, {
    src: 'https://via.placeholder.com/150',
  }],
};

, и перед регистрацией события изменения используйте эта информация для создания всех <option /> и <img />


// use imageInfoByCity to create <option/> 
createSelectorOptions(imageInfoByCity)

// use imageInfoByCity to create <img />
createDisplayContent(imageInfoByCity)

для реализации createSelectorOptions может выглядеть следующим образом: 


function createSelectorOptions(options){
  const gallerySelect = document.querySelector('.gallery-select');
   Object.entries(options).forEach( option => {
      const [city, imageInfo] = option;
      const optionDOM = document.createElement('option');
      optionDOM.innerHTML = `${city} (${imageInfo.length}) `
      gallerySelect.appendChild(optionDOM)
   })
}

вот живой пример из codepen

...