Как показать конкретный текст, если установлен один конкретный флажок среди множества уникальных флажков - PullRequest
Новая
       13

Как показать конкретный текст, если установлен один конкретный флажок среди множества уникальных флажков

0 голосов
/ 01 июля 2018

У меня есть конкретная задача, и я не уверен, как лучше это сделать.

У меня есть около 60 уникальных флажков, и при нажатии отображается текст справа от них (привязанный к этому флажку).

Я сделал это с 64 eventListeners, но я не уверен, что это лучший способ: я хотел бы упростить код.

Так, например, у меня есть несколько флажков в метке: test, test1, test2 и так далее. И когда я нажимаю на флажок test, может появиться текст: «Привет, мир», если отмечен test1, может появиться текст: «Один два три», если отмечен test2, текст: «Я» Вы сделали это "может появиться, но если ни один из них не выбран, тексты не будут отображаться.

Это код, один слушатель событий у меня сейчас: 

var forSale = document.querySelector('#for_sale');
var forSaleEmail = document.querySelector('#for_sale_email');
/*For Sale*/
forSale.addEventListener("click", function(){
    if(forSale.checked === true){
        forSaleEmail.style.display = 'block';
    } else {
        forSaleEmail.style.display = 'none';
    }
});

Где переменная forSale - это флажок, а forSaleEmail - текст, который должен отображаться.

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

HTML-код выглядит следующим образом: 

<div><label>For Sale <input type="checkbox" id="for_sale"></label></div>
<div><span id="for_sale_email">
<p>
for sale
</p>
</span></div>

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

Опция делегирования событий, где вы добавляете один обработчик события к родителю / предку всех input и используете свойство события event.target, чтобы обнаружить тот, по которому щелкнули и просто переключить класс на его родителей div.

В сочетании с CSS-смежным селектором + все становится так просто, как этот

Примечание 1: Наличие <p> внутри встроенного элемента, такого как <span>, не является допустимой разметкой, поэтому я удалил ее. Если вам нужно дополнительное, используйте другой <span> и задайте ему аналогичный стиль, который <p> имеет по умолчанию.

Примечание 2: id должно быть уникальным, поэтому убедитесь, что вы позаботились об этом, а для вашего for_sale_email это не обязательно, поэтому я изменил его на класс.

Примечание 3: Если вы хотите «переключаться» между выбранными input, я также добавил часть кода, которая делает это.

Фрагмент стека 

document.querySelector('.inputs_parent').addEventListener('change', function(event) {

  // this will "hide" previous checked input
  var prev = this.querySelector('div.checked');
  if (prev) {
      prev.classList.remove('checked');
      prev.querySelector('input').checked = false;
  }


  // remove this "if" statement if won't use the above 
  if (!prev || !prev.contains(event.target))
      event.target.closest('div').classList.toggle('checked');

})
.for_sale_email {
  display: none;
}

div.checked + div .for_sale_email {
  display: inline-block;
}
<div class="inputs_parent">

  <div>
    <label>For Sale
      <input type="checkbox" id="for_sale1">
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <div>
    <label>For Sale
      <input type="checkbox" id="for_sale2">
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <div>
    <label>For Sale
      <input type="checkbox" id="for_sale3">
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <div>
    <label>For Sale
      <input type="checkbox" id="for_sale4">
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

</div>

Если вы можете сделать небольшое изменение в разметке, вы можете сделать это только с помощью CSS.

Фрагмент стека 

.inputs_parent label:after {
  content: 'X';
  display: inline-block;
  text-align: center;  
  font-size: 12px;
  color: transparent;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  margin-left: 5px;
}

.inputs_parent input,
.inputs_parent .for_sale_email {
  display: none;
}

.inputs_parent input:checked + div label:after {
  color: black;
}

.inputs_parent input:checked + div + div .for_sale_email {
  display: inline-block;
}
<div class="inputs_parent">

  <input type="checkbox" id="for_sale1">
  <div>
    <label for="for_sale1">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="checkbox" id="for_sale2">
  <div>
    <label for="for_sale2">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="checkbox" id="for_sale3">
  <div>
    <label for="for_sale3">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="checkbox" id="for_sale4">
  <div>
    <label for="for_sale4">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

</div>

И этот переключатель включает проверенные элементы, используя input type="radio".

Фрагмент стека 

.inputs_parent label:after {
  content: 'X';
  display: inline-block;
  text-align: center;  
  font-size: 12px;
  color: transparent;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  margin-left: 5px;
}

.inputs_parent input,
.inputs_parent .for_sale_email {
  display: none;
}

.inputs_parent input:checked + div label:after {
  color: black;
}

.inputs_parent input:checked + div + div .for_sale_email {
  display: inline-block;
}
<div class="inputs_parent">

  <input type="radio" name="radio" id="for_sale1">
  <div>
    <label for="for_sale1">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale2">
  <div>
    <label for="for_sale2">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale3">
  <div>
    <label for="for_sale3">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale4">
  <div>
    <label for="for_sale4">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

</div>
0 голосов
/ 01 июля 2018

Ваш код полностью в порядке, но вы должны обязательно преобразовать его в функцию: 

function selectMessage(checkbockSelector, messageSelector) {
   var checkbox = document.querySelector(checkboxSelector);
   var message = document.querySelector(messageSelector);

   checkbox.addEventListener("click", function(){
      message.style.display = checkbox.selected ?  'block' : 'none';
   });
}

Так что вы можете просто сделать: 

selectMessage("#for_sale", "#for_sale_email");

Если элементов много, было бы неплохо преобразовать HTML в структуру, которая напрямую связывает метки с входными данными: 

<div id="sale">
  <label>For Sale</label>
  <input type="checkbox" id="for_sale" class="withhint">
  <span class="hint">
    <p>for sale</p>
  </span>   
</div>

Затем вы можете скрыть их с помощью CSS по умолчанию: 

.hint { display: none; }

И используйте javascript, чтобы применить обработчик ко всем: 

document.querySelectorAll(".withhint").forEach(function(input) {
  const hint = input.parentElement.querySelector(".hint");
  input.addEventListener("click", function() {
     hint.style.display = input.checked ? "block" : "none";
  });
});

Попробуйте!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...