腳本中的切換對我不起作用

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>

它現在遍歷與類匹配的所有元素，並根據選中框的條件隱藏/顯示它們。

希望這可以幫助！

編輯：固定代碼，現在應該可以工作了！