我正在尝试隐藏并显示一些引导卡，但我无法弄清楚。 所有的卡都有课程卡（当然），并且我想在单击按钮时隐藏所有这些卡。这是我现在拥有的：

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>

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

切换How to hide and show bootstrap 4 cards by hovering over navigation menu through css?

标准js document.getElementById（“。card”）。style.display =“ none”;

我看过反应的东西，但我不明白。