Javascript 在引导中隐藏/显示卡

我试图在引导中隐藏和显示一些卡片，但我无法理解。 所有的卡片都有类别卡片（当然），当点击一个按钮时，我试图隐藏所有这些卡片。以下是我现在拥有的：

function myFunction() {

  jQuery(document).ready(function($) {
    $(".card").hide();
  });

  var game = document.getElementById("game").value;
  var resolution = document.getElementById("resolution").value;
  var graphic = document.getElementById("graphic").value;

  if (game == "Black" && graphic == "high" && resolution == "1080") {
    alert("Hello " + game + "! You will now be redirected to www.w3Schools.com");
  } else if (book == "Red") {

  } else if (book == "Green") {

  } else {

  }
}

函数调用正确，因为警报工作正常

由于某种原因

jQuery(document).ready(function($) {
        $(".card").hide();
      });

部件在js函数之外（未连接到按钮时）工作

不知道这是否有帮助，但这也是我的引导文档的一个片段：

<button type="submit" class="btn btn-primary" id="btn" onclick="myFunction()">Submit</button>
          </form>
        </div>
        <!-- Results -->
        <div class="card" id="p2" style="width:200px; margin:30px">
          <img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
          <div class="card-body">
            <h5 class="card-title">Processor</h5>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
          </div>
        </div>
        <div class="card" id="p3" style="width:200px; margin:30px">
          <img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
          <div class="card-body">
            <h5 class="card-title">Graphic card</h5>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
          </div>
        </div>

提交
处理器



图形卡

这里是我已经尝试过的东西：

开关

标准js document.getElementById（“.card”）.style.display=“无”

---

我已经看了react的内容，但我不明白这一点。

我认为如果要对DOM中具有card类的所有元素进行显示和隐藏切换，您必须这样做

var myFunction = function() {

 var divsToHide = document.getElementsByClassName("card"); 
if(divsToHide.length>0){
        for(var i = 0; i < divsToHide.length; i++){

      if( divsToHide[i].style.display== "none"){
    divsToHide[i].style.display = "block";
      }else{

           divsToHide[i].style.display = "none"; // depending on what you're doing
      }    
}} }

var myFunction=function（）{
var divsToHide=document.getElementsByClassName（“卡”）；
如果（divsToHide.length>0）{
for（var i=0；i

---

我希望这对您有所帮助

您的问题不是来自您的功能，而是您想要的行为。由于您没有复制所有代码，我不得不对函数的第二部分进行注释：该代码确实可以隐藏卡片，但由于某种原因，在运行“按按钮激活”脚本后，该按钮还会激活JQuery，从而重置页面。不知道为什么。我无法删除JQuery CDN，因为它会给引导带来问题。