js для пользовательского выбора работает в коде и jsfiddle, но не в браузере? - PullRequest
Новая
       60

js для пользовательского выбора работает в коде и jsfiddle, но не в браузере?

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

Я работаю над настраиваемым элементом выбора, код работает должным образом в codepen и jsfiddle, но не выпадает, если я запустил его в браузере. Я никогда раньше не реализовывал js в веб-проектах, поэтому мне кажется, что мне не хватает чего-то довольно простого.

вот ссылка на код: https://codepen.io/kylegendy/pen/xxwYrPr

и вот код, который я ввел ...:

скрипт. js 

for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
  dropdown.addEventListener('click', function() {
    this.querySelector('.custom-select').classList.toggle('open');
  })
}

for (const option of document.querySelectorAll(".custom-option")) {
  option.addEventListener('click', function() {
    if (!this.classList.contains('selected')) {
      this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
      this.classList.add('selected');
      this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
    }
  })
}

window.addEventListener('click', function(e) {
  for (const select of document.querySelectorAll('.custom-select')) {
    if (!select.contains(e.target)) {
      select.classList.remove('open');
    }
  }
});

function selectOption(index) {
  var optionOnIdx = document.querySelector('.custom-option:nth-child(' + index + ')');
  var optionSelected = document.querySelector('.custom-option.selected');
  if (optionOnIdx !== optionSelected) {
    optionSelected.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
    optionOnIdx.classList.add('selected');
    optionOnIdx.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = optionOnIdx.textContent;
  }
}


document.querySelector('button').addEventListener("click", function() {
  selectOption(2);
});

шаблон. css 

*,
*:after,
*:before {
  box-sizing: border-box;
}

.container .custom-select-wrapper {
  display: flex;
  text-align: center;
  /* centeres the text horizontally */
  width: 300px;
  border-width: thick;
  border-color: blue;
  border-style: solid;
}

custom-select-wrapper>div {
  display: inline-block;
  position: relative;
  max-width: 50%;
}

.container .selectName {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
  border-width: thick;
  border-color: red;
  border-style: none solid none none;
  background-color: rgba(228, 228, 228, 0.39);
}

.custom-select-wrapper {
  position: relative;
  user-select: none;
}

.custom-select {
  display: flex;
  flex-direction: column;
  border-width: 0;
}

.custom-select-wrapper>div {
  display: inline-block;
  /* blocks just line up without floats */
  position: relative;
  /* sets positioning context for 2nd level menu */
  width: 50%;
  height: 60px;
}

.custom-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  color: rgba(83, 83, 83, 1);
  line-height: 60px;
  background-color: rgba(228, 228, 228, 0.39);
  cursor: pointer;
  border-width: 0;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  border: none;
  background: white;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
}

.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px 0 22px;
  color: rgba(83, 83, 83, 1);
  line-height: 60px;
  cursor: pointer;
}

.custom-option:hover {
  cursor: pointer;
  background-color: rgba(228, 228, 228, 0.39);
}

.custom-option.selected {
  color: white;
  background-color: rgb(149, 189, 204);
}

.arrow {
  position: relative;
  height: 15px;
  width: 15px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0.15rem;
  height: 100%;
  transition: all 0.5s;
}

.arrow::before {
  left: -5px;
  transform: rotate(45deg);
  background-color: #394a6d;
}

.arrow::after {
  left: 5px;
  transform: rotate(-45deg);
  background-color: #394a6d;
}

.open .arrow::before {
  left: -5px;
  transform: rotate(-45deg);
}

.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}

шаблон. html 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>the wall</title>
  <link href="template.css" rel="stylesheet" type="text/css">
  <script src="script.js" type="text/javascript"></script>
</head>


<body>


  <div class="container">
    <div class="custom-select-wrapper">

      <div class="selectName"><span>Type</span></div>

      <div class="custom-select">
        <div class="custom-select__trigger"><span>Tesla</span>
          <div class="arrow"></div>
        </div>
        <div class="custom-options">
          <span class="custom-option selected" data-value="tesla">Tesla</span>
          <span class="custom-option" data-value="volvo">Volvo</span>
          <span class="custom-option" data-value="mercedes">Mercedes</span>
        </div>
      </div>

    </div>
  </div>


</body>

</html>

изменить: я удалил сегмент кода js, начинающийся со строки 38 в jsfiddle и codepen, и раскрывающийся список работал так же, как и предполагалось, но когда я избавился от него в файлах для запуска браузер, хотя ошибка исчезает, раскрывающийся список по-прежнему не работает.

1 Ответ

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

Поместите свой скрипт в функцию, как показано ниже 

function Test(){    
    for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
        dropdown.addEventListener('click', function () {
            this.querySelector('.custom-select').classList.toggle('open');
        })
    }

    for (const option of document.querySelectorAll(".custom-option")) {
        option.addEventListener('click', function () {
            if (!this.classList.contains('selected')) {
                this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
                this.classList.add('selected');
                this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
            }
        })
    }

    window.addEventListener('click', function (e) {
        for (const select of document.querySelectorAll('.custom-select')) {
            if (!select.contains(e.target)) {
                select.classList.remove('open');
            }
        }
    });

    function selectOption(index) {
        var optionOnIdx = document.querySelector('.custom-option:nth-child('+index+')');
      var optionSelected = document.querySelector('.custom-option.selected');
      if (optionOnIdx !== optionSelected) {
        optionSelected.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
                optionOnIdx.classList.add('selected');
                optionOnIdx.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = optionOnIdx.textContent;
            }
    }

}

, и вызовите эту функцию со своей HTML страницы 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>the wall</title>
  <link href="template.css" rel="stylesheet" type="text/css">
  <script src="script.js" type="text/javascript"></script>
</head>


<body>
<div class="container">
        <div class="custom-select-wrapper">

            <div class="selectName"><span>Type</span></div>

            <div class="custom-select">
                <div class="custom-select__trigger"><span>Tesla</span>
                    <div class="arrow"></div>
                </div>
                <div class="custom-options">
                    <span class="custom-option selected" data-value="tesla">Tesla</span>
                    <span class="custom-option" data-value="volvo">Volvo</span>
                    <span class="custom-option" data-value="mercedes">Mercedes</span>
                </div>
            </div>

        </div>
</div>
<script>
Test();
</script>
</body>

</html>

и удалите следующий фрагмент кода из вашего скрипта. js стр. 

document.querySelector('button').addEventListener("click", function() {
  selectOption(2);
});
...