Вопросы Теги

Как выбрать каждый выпадающий столбец отдельно, используя одну функцию [duplicate]

Раньше я использовал инструмент с открытым исходным кодом, названный HTMLParser . Он разработан, чтобы анализировать HTML по-разному и хорошо служит цели. Он может анализировать HTML как другой treenode, и вы можете легко использовать его API для получения атрибутов из узла. Проверьте это и посмотрите, поможет ли это вам.

0
задан SuperDJ 17 January 2019 в 15:33
поделиться

2 ответа

Вы можете добиться этого, изменив идентификатор checkbox на класс (идентификаторы должны быть уникальными). При связывании события click с javascript вы получаете хорошее использование this. Вы можете использовать свойство property this.nextElementSibling, чтобы получить .checkbox, принадлежащий стрелке.

Также был изменен оператор if для проверки свойства display элемента вместо глобального var. Вам нужно установить начальное значение на none, чтобы избежать ошибок (это не совсем то же самое, что стиль css)

Также вы можете комбинировать две функции в зависимости от их использования. [1115 ]

Примечание: Вы должны также изменить элементы с идентификатором arrow, чтобы я был уникальным. С этим фрагментом проблем не возникло, но, скорее всего, в будущем у вас начнутся головные боли. 

document.querySelectorAll(".selectBox").forEach((el) => {
  el.addEventListener('click', showCheckboxes);
  el.addEventListener('click', changeArrow);
  el.nextElementSibling.style.display = "none";
});


function showCheckboxes() {
  var thisCheckbox = this.nextElementSibling;
  if (thisCheckbox.style.display == "none") {
    thisCheckbox.style.display = "block";
  } else {
    thisCheckbox.style.display = "none";
  }
}

function changeArrow() {
  var arrow = this.getElementsByClassName('arrow')[0];
  
  if (arrow.classList.contains("down-arrow")) {
    arrow.classList.remove("down-arrow");
    arrow.classList.add("up-arrow");
  } else if (arrow.classList.contains("up-arrow")) {
    arrow.classList.remove("up-arrow");
    arrow.classList.add("down-arrow");
  }
}
.github {
  margin-top: 50px;
}

.multiselect {
  width: 170px;
  margin-top: 80px;
  position: absolute;
  z-index: 40;
  display: flex;
  flex-direction: row;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.checkboxes {
  background-color: #e5e5e5;
  border: none;
}

.checkboxes__container {
  display: flex;
  height: auto;
  margin-bottom: 10px;
}

.checkboxes__container--input {
  display: flex;
  margin: 0 15px;
}

.checkboxes__container--text {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.checkboxes input {
  border: none;
  background-color: #fff;
}

.checkboxes label {
  display: block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  border: 1px solid lightgray;
}

.checkboxes label:after {
  content: '';
  width: 13px;
  height: 11px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 2px solid #6d3838;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkboxes label:hover::after {
  opacity: 0;
}

.checkboxes input[type=checkbox] {
  visibility: hidden;
}

.checkboxes input[type=checkbox]:checked+label:after {
  opacity: 1;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background-color: transparent;
  width: 170px !important;
  height: 35px;
  border: none;
  box-sizing: border-box;
  padding-left: 25px;
}

.select-container {
  display: flex;
  width: 170px;
  background-color: #e5e5e5;
}

.down-arrow {
  background-image: url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
}

.up-arrow {
  background-image: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}

.arrow {
  width: 35px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #00a671;
}

.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
}

.squaredFour label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid lightgray;
}

.squaredFour label:after {
  content: '';
  width: 12px;
  height: 8px;
  position: absolute;
  top: 20%;
  left: 25%;
  /* transform: translate(-50%,-50%); */
  border: 2px solid #6d3838;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredFour label:hover::after {
  opacity: 0;
}

.squaredFour input[type=checkbox] {
  visibility: hidden;
}

.squaredFour input[type=checkbox]:checked+label:after {
  opacity: 1;
}
<div class="multiselect">
  <div>
    <div class="selectBox">
      <div class="select-container">
        <select>
          <option>ogródek/strych</option>
        </select>
        <img class="arrow down-arrow" alt="">
      </div>

      <div class="overSelect"></div>
    </div>

    <div class="checkboxes">
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="one">
					<label for="one"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>ogródek</span>
        </span>
      </div>
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="two">
					<label for="two"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>strych</span>
        </span>
      </div>

    </div>
  </div>
  <div>
    <div class="selectBox">
      <div class="select-container">
        <select>
          <option>status</option>
        </select>
        <img class="arrow down-arrow" alt="">
      </div>

      <div class="overSelect"></div>
    </div>

    <div class="checkboxes">
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="three">
					<label for="three"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>wolne</span>
        </span>
      </div>
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="four">
					<label for="four"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>rezerwacja</span>
        </span>
      </div>

    </div>
  </div>
  <div>
    <div class="selectBox">
      <div class="select-container">
        <select>
          <option>status</option>
        </select>
        <img class="arrow down-arrow" alt="">
      </div>

      <div class="overSelect"></div>
    </div>

    <div class="checkboxes">
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="three">
					<label for="three"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>wolne</span>
        </span>
      </div>
      <div class="checkboxes__container">
        <span class="checkboxes__container--input">
					<input type="checkbox" id="four">
					<label for="four"></label>
				</span>
        <span class="checkboxes__container--text">
					<span>rezerwacja</span>
        </span>
      </div>

    </div>
  </div>

</div>

0
ответ дан Mark Baijens 17 January 2019 в 15:33
поделиться

Проблема возникает из-за того, что все флажки имеют одинаковые идентификаторы «флажки», поэтому при попытке выбрать по идентификатору «флажки» выбирается первый элемент html, имеющий идентификатор: «флажки». Я решил это здесь: https://codepen.io/snehansh/pen/PXvawv

Я решил вашу проблему, назначив флажки с тем же именем класса

[110 ]

, а затем я устанавливаю переменную javascript, основываясь на установленном флажке столбца, 

<div  class="selectBox" onclick="sectionOneClicked(); showCheckboxes(); changeArrow();">

var section = null;
function sectionOneClicked() {
  section = 0;
}

, а затем внутри вашей функции 'showCheckboxes ()' Я передаю выбранный индекс в флажки [ ] 'array 

function showCheckboxes() {
  var checkboxes = document.getElementsByClassName("checkboxes");
    if (!expanded) {
        checkboxes[section].style.display = "block";
        expanded = true;
    } else {
        checkboxes[section].style.display = "none";
        expanded = false;
    }
}
0
ответ дан user1579234 17 January 2019 в 15:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: