脚本中的切换对我不起作用

Question

我正在使用我在网上找到的这段代码，但它并没有完全按照我想要的方式工作。

基本上我想要复选框来隐藏基于用户选择的 div。 我正在为一家餐馆建立一个过敏原建议页面。 当客人选择他们拥有的过敏原时，我希望它隐藏他们不能拥有的菜肴。

如果客人有一种过敏原，上面的代码就可以完美运行。 它隐藏了 div。 如果他们选择了多个，则该框将重新出现。

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter. </div> <ul> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> </ul>

我猜它这样做是因为代码正在切换，但我不知道有任何其他代码可以防止这种情况发生。 您的帮助将不胜感激。

Answer 1

您的代码抛出意外的输入结束，您缺少$(document).ready()括号：

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter.</div> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li>

如果有多个复选框指向应该隐藏的同一产品：

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).val(); if($(this).is(':checked')){ $("." + inputValue).hide(); }else{ $("." + inputValue).show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter.</div> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> <li> <input type="checkbox" id="checkbox4" value="Gluten"> <label for="checkbox4"> Gluten</label> </li>

Answer 2

我刚刚从链接中复制了更多代码

这里发生的只是来自ks-cboxtags类的复选框会受到影响，因此任何其他复选框都不会具有此功能。

当您单击它时，它将显示 div，如果其选定的 div 将被隐藏。

查看下面的代码片段以获取更多详细信息。

 $(document).ready(function() { $(".test").click("test"); //ignore this $(".ks-cboxtags input").click(function() { $("."+$(this).val()).show(); $(".ks-cboxtags input:checked").each(function() { $("."+$(this).val()).hide(); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <main class="inline-block-center"> <div class="selectt Gluten" style="display: block;"> <strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero &amp; pepper salsa, green tomatillo &amp; jalapeño salsa.</div> <div class="selectt Eggs Gluten" style="display: block;"> <strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div> <div class="selectt Gluten" style="display: block;"> <strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div> <div class="selectt Milk Gluten" style="display: block;"> <strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div> </main> <ul class="ks-cboxtags"> <li> <input type="checkbox" id="checkboxOne" value="Gluten"> <label for="checkboxOne"> Gulten</label> </li> <li> <input type="checkbox" id="checkboxTwo" value="Crustaceans"> <label for="checkboxTwo"> Crustaceans</label> </li> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> <li> <input type="checkbox" id="checkboxFour" value="Fish"> <label for="checkboxFour"> Fish</label> </li> <li> <input type="checkbox" id="checkboxFive" value="Peanuts"> <label for="checkboxFive"> Peanuts</label> </li> <li> <input type="checkbox" id="checkboxSix" value="Soy Beans"> <label for="checkboxSix"> Soy Beans</label> </li> <li> <input type="checkbox" id="checkboxSeven" value="Milk"> <label for="checkboxSeven"> Milk</label> </li> <li> <input type="checkbox" id="checkboxEight" value="Tree Nuts"> <label for="checkboxEight"> Tree Nuts</label> </li> <li> <input type="checkbox" id="checkboxNine" value="Celery"> <label for="checkboxNine"> Celery</label> </li> <li> <input type="checkbox" id="checkboxTen" value="Mustard"> <label for="checkboxTen"> Mustard</label> </li> <li> <input type="checkbox" id="checkboxEleven" value="Seasame"> <label for="checkboxEleven"> Seasame</label> </li> <li> <input type="checkbox" id="checkboxTweleve" value="Sulphur"> <label for="checkboxTweleve"> Sulphur</label> </li> <li> <input type="checkbox" id="checkboxThirteen" value="Lupin"> <label for="checkboxThirteen"> Lupin</label> </li> </ul>

Answer 3

我已经在没有 jQuery 的情况下重写了代码，因为它似乎不需要它......

这是笔： https : //codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011

JS

    //object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
    Eggs: false,
    Gluten: false
  }

let clickedBox  = (input) => {
  //mark the selected allergen as checked
  choices[input.value] = input.checked 
  //returns an array of classes for each element with the selected allergen
  let selected = document.getElementsByClassName(input.value)
  //iterates though array of elements with selected allergen
  for (let i = 0; i < selected.length; i++) {
    //creates an array of classes for each element
    var classList = selected[i].className.split(' ')
    var counter = 0
    classList.forEach(x=>{
      //if the element contains a class that is checked, hide it
      if (choices[x]) {selected[i].style.display = 'none'} else{
        //count the number of classes that aren't checked
        counter++
        //if the element has no classes that are checked, show it
        if (counter == classList.length) {selected[i].style.display = 'block'}
      };
    })
  }
  };

HTML

<div class=" Eggs Gluten"> 
        <strong>Eggs Gluten</strong>
</div>
<div class="Eggs "> 
        <strong>Eggs</strong>
</div>
<div class="Gluten "> 
        <strong>Gluten</strong>
</div>

<li> 
  <input 
         onclick = 'clickedBox(this)' 
         type="checkbox"
         id="checkboxOne" 
         value="Eggs">
  <label for="checkboxOne"> Eggs</label>
  <input 
         onclick = 'clickedBox(this)' 
         type="checkbox"
         id="checkboxTwo" 
         value="Gluten">
  <label for="checkboxTwo"> Gluten</label>

</li>

它现在遍历与类匹配的所有元素，并根据选中框的条件隐藏/显示它们。

希望这可以帮助！

编辑：固定代码，现在应该可以工作了！