Question

我有一个特定的任务要做，我不确定什么是最好的方法。

我有大约60个唯一的复选框，当单击时，在其右侧显示一些文本（与该单击的复选框绑定）。

我已经使用64个特定的eventListeners完成了此操作，但是我不确定这是最好的方法：我想简化代码。

例如，我在标签中有一堆复选框，它们是：test，test1，test2，依此类推。当我单击test复选框时，如果选中了test1，则文本可能会出现：“ hello world”，如果选中了test2，则会出现文本：“ One 2 three”。，可能会显示文本：“我做完了”，但是如果未选择任何内容，则不会显示文本。

这是代码，我现在有一个事件侦听器：

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>

Answer 1

一个选项是事件委托，您可以在所有input的父/祖先中添加一个事件处理程序，并使用事件属性event.target来检测点击的那个，只需在其父div上切换一个班级即可。

与CSS adjacent sibling selector +结合使用就变得如此简单

注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>

Answer 2

您的代码完全可以，但是您应该明确地将其抽象为一个函数：

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";
  });
});

Try it!

如果在一堆独特的复选框中选中了一个特定的复选框，如何显示特定的文本

2 个答案: